Joseph.Rawlings
0ed29d782e
- Updated subdomain.blade.php to enhance button styles and modal transitions. - Changed text colors for better readability and consistency across the UI. - Refactored system.blade.php to unify button components and improve layout structure. - Adjusted modal z-index values for consistent layering. - Enhanced accessibility by ensuring proper text contrast and hover states.
1013 lines
69 KiB
PHP
1013 lines
69 KiB
PHP
<x-proxmox::layout :server="$server" view="storage" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<style>
|
|
/* Hide sidebar in problematic resolution range (768px - 1023px) */
|
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
html body > div.w-full.flex.flex-grow > aside.w-64.h-screen,
|
|
html body > div.w-full.flex > aside.w-64.h-screen,
|
|
html body aside.w-64.h-screen.mt-14,
|
|
html body aside.w-64.h-screen.mt-24,
|
|
body aside.w-64[class*="md:flex"] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
width: 0 !important;
|
|
max-width: 0 !important;
|
|
overflow: hidden !important;
|
|
position: absolute !important;
|
|
left: -9999px !important;
|
|
}
|
|
html body > div.w-full.flex.flex-grow > div[class*="md:ml-64"],
|
|
html body > div.w-full.flex > div[class*="md:ml-64"],
|
|
body > div > div[class*="md:ml-64"],
|
|
div[class*="md:ml-64"] {
|
|
margin-left: 0 !important;
|
|
}
|
|
html body > div.w-full.flex.flex-grow > div[class*="rtl:md:mr-64"],
|
|
html body > div.w-full.flex > div[class*="rtl:md:mr-64"],
|
|
body > div > div[class*="rtl:md:mr-64"],
|
|
div[class*="rtl:md:mr-64"] {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@php
|
|
$vmRunning = $status && $status->status !== 'stopped';
|
|
@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>
|
|
|
|
<!-- 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>
|
|
@endif
|
|
|
|
<!-- 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>
|
|
@endif
|
|
|
|
<!-- Storage Usage Overview -->
|
|
<div class="bg-background-secondary border border-neutral rounded-lg p-5">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
|
|
<div>
|
|
<h3 class="text-lg font-semibold">Storage Quota</h3>
|
|
<p class="text-sm text-base/60 mt-1">
|
|
{{ number_format($totalAllocatedStorage, 1) }} GB used of {{ number_format($maxAllowedStorage, 1) }} GB allocated
|
|
@if(count($unusedDrives) > 0)
|
|
<span class="text-warning">(includes detached drives)</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button wire:click="loadStorageConfiguration"
|
|
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
<x-ri-refresh-line class="size-4" wire:loading.class="animate-spin" wire:target="loadStorageConfiguration" />
|
|
Refresh
|
|
</button>
|
|
@if($this->remainingStorage > 0 && !$vmRunning)
|
|
<button wire:click="openAddDriveModal"
|
|
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">
|
|
<x-ri-add-line class="size-4" />
|
|
Add Drive
|
|
</button>
|
|
@elseif($this->remainingStorage > 0 && $vmRunning)
|
|
<button disabled
|
|
title="Server must be powered off to add drives"
|
|
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg bg-neutral/50 text-base/50 cursor-not-allowed">
|
|
<x-ri-add-line class="size-4" />
|
|
Add Drive
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="w-full bg-neutral/30 rounded-full h-3 overflow-hidden">
|
|
@php
|
|
$usagePercent = $maxAllowedStorage > 0 ? min(100, ($totalAllocatedStorage / $maxAllowedStorage) * 100) : 0;
|
|
$colorClass = $usagePercent < 70 ? 'bg-success' : ($usagePercent < 90 ? 'bg-warning' : 'bg-danger');
|
|
@endphp
|
|
<div class="{{ $colorClass }} h-3 rounded-full transition-all duration-500" style="width: {{ $usagePercent }}%"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2 text-xs text-base/50">
|
|
<span>{{ number_format($this->remainingStorage, 1) }} GB remaining</span>
|
|
<span>{{ number_format($usagePercent, 1) }}% used</span>
|
|
</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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">Select the SCSI controller type for SCSI drives.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<select wire:model.live="scsiControllerType"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($scsiControllerOptions as $option)
|
|
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button wire:click="saveScsiController"
|
|
wire:loading.attr="disabled"
|
|
class="inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
@if($this->scsiControllerSynced || $vmRunning) disabled @endif>
|
|
<x-loading target="saveScsiController" />
|
|
<span wire:loading.remove wire:target="saveScsiController">Save Changes</span>
|
|
<span wire:loading wire:target="saveScsiController">Saving...</span>
|
|
</button>
|
|
</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>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
@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 →
|
|
</button>
|
|
@elseif($this->remainingStorage > 0 && $vmRunning)
|
|
<p class="mt-4 text-base/50 text-sm">Power off server to add drives</p>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="divide-y divide-neutral">
|
|
@foreach($drives as $driveKey => $drive)
|
|
<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">
|
|
<div class="flex items-start gap-4">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 flex-shrink-0">
|
|
<x-ri-hard-drive-2-fill class="size-5 text-primary" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<h4 class="font-semibold text-base">{{ $drive['label'] }}</h4>
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-neutral/30 text-base/70">{{ $driveKey }}</span>
|
|
@if($drive['ssd'])
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-success/20 text-success">SSD</span>
|
|
@endif
|
|
@if($drive['iothread'])
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-info/20 text-info">IO Thread</span>
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-neutral/20 text-foreground-secondary">{{ number_format($drive['size'], 1) }} GB</span>
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-neutral/20 text-foreground-secondary">Cache: {{ ucfirst($drive['cache']) }}</span>
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-neutral/20 text-foreground-secondary">AIO: {{ $drive['aio'] }}</span>
|
|
@if($drive['discard'])
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-success/20 text-success">Discard</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
@if($vmRunning)
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-base/50 cursor-not-allowed">
|
|
<x-ri-settings-3-line class="size-3.5" />
|
|
Settings
|
|
</button>
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-base/50 cursor-not-allowed">
|
|
<x-ri-arrow-left-right-line class="size-3.5" />
|
|
Device Bus
|
|
</button>
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
|
|
<x-ri-eject-line class="size-3.5" />
|
|
Detach
|
|
</button>
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral/30 bg-neutral/10 text-base/50 cursor-not-allowed">
|
|
<x-ri-delete-bin-line class="size-3.5" />
|
|
Delete
|
|
</button>
|
|
@else
|
|
<button wire:click="openEditDriveModal('{{ $driveKey }}')"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
<x-ri-settings-3-line class="size-3.5" />
|
|
Settings
|
|
</button>
|
|
<button wire:click="openMoveDriveModal('{{ $driveKey }}')"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
<x-ri-arrow-left-right-line class="size-3.5" />
|
|
Device Bus
|
|
</button>
|
|
@if(count($unusedDrives) >= 2)
|
|
<button disabled
|
|
title="Maximum of 2 detached drives allowed"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
|
|
<x-ri-eject-line class="size-3.5" />
|
|
Detach
|
|
</button>
|
|
@else
|
|
<button wire:click="openDetachModal('{{ $driveKey }}')"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(234 179 8 / 0.5); background-color: rgb(234 179 8 / 0.1); color: rgb(234 179 8); transition: background-color 0.15s ease;"
|
|
onmouseover="this.style.backgroundColor='rgb(234 179 8 / 0.2)'"
|
|
onmouseout="this.style.backgroundColor='rgb(234 179 8 / 0.1)'">
|
|
<x-ri-eject-line class="size-3.5" />
|
|
Detach
|
|
</button>
|
|
@endif
|
|
<button wire:click="openDeleteModal('{{ $driveKey }}')"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-danger/50 bg-danger/10 text-danger hover:bg-danger/20 transition-colors">
|
|
<x-ri-delete-bin-line class="size-3.5" />
|
|
Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
</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>
|
|
@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>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="divide-y divide-neutral">
|
|
@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">
|
|
<div class="flex items-start gap-4">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-warning/10 flex-shrink-0">
|
|
<x-ri-hard-drive-2-line class="size-5 text-warning" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<h4 class="font-semibold text-base">{{ $unusedDrive['label'] }}</h4>
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-warning/20 text-warning">{{ $unusedKey }}</span>
|
|
@if(isset($unusedDrive['size_formatted']))
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded bg-info/20 text-info">{{ $unusedDrive['size_formatted'] }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1 text-xs text-base/60">
|
|
<span class="truncate max-w-[200px]" title="{{ $unusedDrive['volume'] }}">{{ $unusedDrive['volume'] }}</span>
|
|
@if(isset($unusedDrive['storage']))
|
|
<span>Storage: {{ $unusedDrive['storage'] }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
@if($vmRunning)
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
|
|
<x-ri-link class="size-3.5" />
|
|
Reattach
|
|
</button>
|
|
<button disabled
|
|
title="Server must be powered off"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
|
|
<x-ri-delete-bin-line class="size-3.5" />
|
|
Delete
|
|
</button>
|
|
@elseif($totalAllocatedStorage >= $maxAllowedStorage && $maxAllowedStorage > 0)
|
|
<button disabled
|
|
title="Storage quota reached - please upgrade your service or delete drives"
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(150 150 150 / 0.3); background-color: rgb(150 150 150 / 0.1); color: rgb(150 150 150); cursor: not-allowed; opacity: 0.6;">
|
|
<x-ri-link class="size-3.5" />
|
|
Reattach
|
|
</button>
|
|
<button wire:click="deleteUnusedDrive('{{ $unusedKey }}')"
|
|
wire:confirm="Are you sure you want to permanently delete this detached drive? This action cannot be undone."
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
|
|
onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
|
|
onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
|
|
<x-ri-delete-bin-line class="size-3.5" />
|
|
Delete
|
|
</button>
|
|
@else
|
|
<button wire:click="openReattachModal('{{ $unusedKey }}')"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-success/50 bg-success/10 text-success hover:bg-success/20 transition-colors">
|
|
<x-ri-link class="size-3.5" />
|
|
Reattach
|
|
</button>
|
|
<button wire:click="deleteUnusedDrive('{{ $unusedKey }}')"
|
|
wire:confirm="Are you sure you want to permanently delete this detached drive? This action cannot be undone."
|
|
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
|
|
onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
|
|
onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
|
|
<x-ri-delete-bin-line class="size-3.5" />
|
|
Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Add Drive Modal -->
|
|
@if($showAddDriveModal)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto" x-data x-init="$el.querySelector('input')?.focus()">
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeAddDriveModal"></div>
|
|
<div class="relative min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<h3 class="text-lg font-semibold">Add New Drive</h3>
|
|
<button wire:click="closeAddDriveModal" class="text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
<!-- Bus Type -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Bus/Device Type</label>
|
|
<select wire:model.live="newDriveBus"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($busTypes as $busKey => $busConfig)
|
|
<option value="{{ $busKey }}">{{ $busConfig['label'] }} (max {{ $busConfig['max'] }} drives)</option>
|
|
@endforeach
|
|
</select>
|
|
<p class="text-xs text-base/50 mt-1">
|
|
@if($newDriveBus === 'scsi')
|
|
SCSI provides best performance with IO thread support. Recommended for most use cases.
|
|
@elseif($newDriveBus === 'virtio')
|
|
VirtIO Block offers high performance but does not support SSD emulation.
|
|
@elseif($newDriveBus === 'sata')
|
|
SATA provides good compatibility with most operating systems.
|
|
@else
|
|
IDE is primarily for legacy compatibility.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Size -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Size (GB)</label>
|
|
<input type="number"
|
|
wire:model="newDriveSize"
|
|
min="1"
|
|
max="{{ $this->remainingStorage }}"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
<p class="text-xs text-base/50 mt-1">Maximum available: {{ number_format($this->remainingStorage, 1) }} GB</p>
|
|
</div>
|
|
|
|
<!-- Cache Mode -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Cache Mode</label>
|
|
<select wire:model="newDriveCache"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($cacheOptions as $option)
|
|
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Async IO -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Async IO Type</label>
|
|
<select wire:model="newDriveAio"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($aioOptions as $option)
|
|
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Options Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<!-- SSD Emulation -->
|
|
<label class="flex items-center gap-2 cursor-pointer {{ !$this->newDriveSsdSupported ? 'opacity-50' : '' }}">
|
|
<input type="checkbox"
|
|
wire:model="newDriveSsd"
|
|
class="rounded border-neutral text-primary focus:ring-primary"
|
|
@if(!$this->newDriveSsdSupported) disabled @endif>
|
|
<span class="text-sm">SSD Emulation</span>
|
|
</label>
|
|
|
|
<!-- IO Thread -->
|
|
<label class="flex items-center gap-2 cursor-pointer {{ !$this->newDriveIothreadSupported ? 'opacity-50' : '' }}">
|
|
<input type="checkbox"
|
|
wire:model="newDriveIothread"
|
|
class="rounded border-neutral text-primary focus:ring-primary"
|
|
@if(!$this->newDriveIothreadSupported) disabled @endif>
|
|
<span class="text-sm">IO Thread</span>
|
|
</label>
|
|
|
|
<!-- Discard/TRIM -->
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox"
|
|
wire:model="newDriveDiscard"
|
|
class="rounded border-neutral text-primary focus:ring-primary">
|
|
<span class="text-sm">Discard (TRIM)</span>
|
|
</label>
|
|
</div>
|
|
|
|
@if($status && $status->status !== 'stopped')
|
|
<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 add new drives.</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeAddDriveModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="addDrive"
|
|
wire:loading.attr="disabled"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
|
@if($status && $status->status !== 'stopped') disabled @endif>
|
|
<x-loading target="addDrive" />
|
|
<span wire:loading.remove wire:target="addDrive">Add Drive</span>
|
|
<span wire:loading wire:target="addDrive">Adding...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Edit Drive Modal -->
|
|
@if($showEditDriveModal && $editingDriveKey && isset($drives[$editingDriveKey]))
|
|
@php $editDrive = $drives[$editingDriveKey]; @endphp
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeEditDriveModal"></div>
|
|
<div class="relative min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<h3 class="text-lg font-semibold">Edit Drive Settings - {{ $editDrive['label'] }}</h3>
|
|
<button wire:click="closeEditDriveModal" class="text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
<div class="p-3 rounded-lg bg-neutral/20 text-sm">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div><span class="text-base/50">Device:</span> {{ $editingDriveKey }}</div>
|
|
<div><span class="text-base/50">Size:</span> {{ number_format($editDrive['size'], 1) }} GB</div>
|
|
<div><span class="text-base/50">Bus Type:</span> {{ $busTypes[$editDrive['bus']]['label'] ?? ucfirst($editDrive['bus']) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cache Mode -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Cache Mode</label>
|
|
<select wire:model="editDriveCache"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($cacheOptions as $option)
|
|
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Async IO -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Async IO Type</label>
|
|
<select wire:model="editDriveAio"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($aioOptions as $option)
|
|
<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Options Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<!-- SSD Emulation -->
|
|
<label class="flex items-center gap-2 cursor-pointer {{ !$this->editDriveSsdSupported ? 'opacity-50' : '' }}">
|
|
<input type="checkbox"
|
|
wire:model="editDriveSsd"
|
|
class="rounded border-neutral text-primary focus:ring-primary"
|
|
@if(!$this->editDriveSsdSupported) disabled @endif>
|
|
<span class="text-sm">SSD Emulation</span>
|
|
</label>
|
|
|
|
<!-- IO Thread -->
|
|
<label class="flex items-center gap-2 cursor-pointer {{ !$this->editDriveIothreadSupported ? 'opacity-50' : '' }}">
|
|
<input type="checkbox"
|
|
wire:model="editDriveIothread"
|
|
class="rounded border-neutral text-primary focus:ring-primary"
|
|
@if(!$this->editDriveIothreadSupported) disabled @endif>
|
|
<span class="text-sm">IO Thread</span>
|
|
</label>
|
|
|
|
<!-- Discard/TRIM -->
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox"
|
|
wire:model="editDriveDiscard"
|
|
class="rounded border-neutral text-primary focus:ring-primary">
|
|
<span class="text-sm">Discard (TRIM)</span>
|
|
</label>
|
|
</div>
|
|
|
|
@if(!$this->editDriveSsdSupported)
|
|
<p class="text-xs text-base/50">Note: SSD emulation is not available for {{ $busTypes[$editDrive['bus']]['label'] ?? ucfirst($editDrive['bus']) }} drives.</p>
|
|
@endif
|
|
|
|
@if(!$this->editDriveIothreadSupported)
|
|
<p class="text-xs text-base/50">Note: IO Thread is not available for {{ $busTypes[$editDrive['bus']]['label'] ?? ucfirst($editDrive['bus']) }} drives.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeEditDriveModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="saveDriveSettings"
|
|
wire:loading.attr="disabled"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 transition-colors">
|
|
<x-loading target="saveDriveSettings" />
|
|
<span wire:loading.remove wire:target="saveDriveSettings">Save Changes</span>
|
|
<span wire:loading wire:target="saveDriveSettings">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Change Device Bus Modal -->
|
|
@if($showMoveDriveModal && $movingDriveKey && isset($drives[$movingDriveKey]))
|
|
@php $moveDrive = $drives[$movingDriveKey]; @endphp
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeMoveDriveModal"></div>
|
|
<div class="relative min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<h3 class="text-lg font-semibold">Change Device Bus - {{ $moveDrive['label'] }}</h3>
|
|
<button wire:click="closeMoveDriveModal" class="text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
<div class="p-3 rounded-lg bg-neutral/20 text-sm">
|
|
<p><span class="text-base/50">Current Device:</span> {{ $movingDriveKey }} ({{ $busTypes[$moveDrive['bus']]['label'] ?? ucfirst($moveDrive['bus']) }})</p>
|
|
<p class="mt-1"><span class="text-base/50">Size:</span> {{ number_format($moveDrive['size'], 1) }} GB</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 p-3 rounded-lg bg-info/10 border border-info/30 text-info text-sm">
|
|
<x-ri-information-line class="size-4 flex-shrink-0" />
|
|
<span>Moving a drive changes its bus type. This may require reinstalling drivers in the guest OS.</span>
|
|
</div>
|
|
|
|
<!-- Target Bus Type -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Target Bus Type</label>
|
|
<select wire:model="moveDriveTargetBus"
|
|
class="w-full px-3 py-2 text-sm rounded-lg border border-neutral bg-background focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
|
|
@foreach($busTypes as $busKey => $busConfig)
|
|
<option value="{{ $busKey }}" @if($moveDrive['bus'] === $busKey) disabled @endif>
|
|
{{ $busConfig['label'] }} @if($moveDrive['bus'] === $busKey) (Current) @endif
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
@if($status && $status->status !== 'stopped')
|
|
<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 device bus.</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeMoveDriveModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="moveDrive"
|
|
wire:loading.attr="disabled"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
|
@if(($status && $status->status !== 'stopped') || $moveDrive['bus'] === $moveDriveTargetBus) disabled @endif>
|
|
<x-loading target="moveDrive" />
|
|
<span wire:loading.remove wire:target="moveDrive">Change Bus</span>
|
|
<span wire:loading wire:target="moveDrive">Changing...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Detach Drive Confirmation Modal -->
|
|
@if($showDetachModal && $detachingDriveKey && isset($drives[$detachingDriveKey]))
|
|
@php $detachDrive = $drives[$detachingDriveKey]; @endphp
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDetachModal"></div>
|
|
<div class="relative min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-warning/10">
|
|
<x-ri-eject-line class="size-5 text-warning" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold">Detach Drive</h3>
|
|
</div>
|
|
<button wire:click="closeDetachModal" class="text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
<div class="p-3 rounded-lg bg-neutral/20 text-sm">
|
|
<p><span class="text-base/50">Drive:</span> {{ $detachDrive['label'] }} ({{ $detachingDriveKey }})</p>
|
|
<p class="mt-1"><span class="text-base/50">Size:</span> {{ number_format($detachDrive['size'], 1) }} GB</p>
|
|
</div>
|
|
|
|
<div class="flex items-start 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 mt-0.5" />
|
|
<div>
|
|
<p class="font-medium">Are you sure you want to detach this drive?</p>
|
|
<p class="mt-1 text-warning/80">The data will be preserved but the drive will no longer be accessible to the VM until reattached.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if($status && $status->status !== 'stopped')
|
|
<div class="flex items-center gap-2 p-3 rounded-lg bg-danger/10 border border-danger/30 text-danger text-sm">
|
|
<x-ri-error-warning-line class="size-4 flex-shrink-0" />
|
|
<span>VM must be stopped to detach drives.</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeDetachModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="detachDrive"
|
|
wire:loading.attr="disabled"
|
|
style="padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; background-color: rgb(234 179 8); color: white; transition: background-color 0.15s ease;"
|
|
onmouseover="this.style.backgroundColor='rgb(202 138 4)'"
|
|
onmouseout="this.style.backgroundColor='rgb(234 179 8)'"
|
|
@if($status && $status->status !== 'stopped') disabled style="opacity: 0.5;" @endif>
|
|
<x-loading target="detachDrive" />
|
|
<span wire:loading.remove wire:target="detachDrive">Detach Drive</span>
|
|
<span wire:loading wire:target="detachDrive">Detaching...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Delete Drive Confirmation Modal -->
|
|
@if($showDeleteModal && $deletingDriveKey && isset($drives[$deletingDriveKey]))
|
|
@php $deleteDrive = $drives[$deletingDriveKey]; @endphp
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" wire:click="closeDeleteModal"></div>
|
|
<div class="relative min-h-screen flex items-center justify-center p-4">
|
|
<div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-danger/10">
|
|
<x-ri-delete-bin-line class="size-5 text-danger" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold">Delete Drive</h3>
|
|
</div>
|
|
<button wire:click="closeDeleteModal" class="text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
<div class="p-3 rounded-lg bg-neutral/20 text-sm">
|
|
<p><span class="text-base/50">Drive:</span> {{ $deleteDrive['label'] }} ({{ $deletingDriveKey }})</p>
|
|
<p class="mt-1"><span class="text-base/50">Size:</span> {{ number_format($deleteDrive['size'], 1) }} GB</p>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-2 p-3 rounded-lg bg-danger/10 border border-danger/30 text-danger text-sm">
|
|
<x-ri-error-warning-line class="size-4 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p class="font-medium">Are you sure you want to DELETE this drive?</p>
|
|
<p class="mt-1 text-danger/80">This action cannot be undone. All data on this drive will be permanently lost!</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if($status && $status->status !== 'stopped')
|
|
<div class="flex items-center gap-2 p-3 rounded-lg bg-danger/10 border border-danger/30 text-danger text-sm">
|
|
<x-ri-error-warning-line class="size-4 flex-shrink-0" />
|
|
<span>VM must be stopped to delete drives.</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeDeleteModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="deleteDrive"
|
|
wire:loading.attr="disabled"
|
|
style="padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; background-color: rgb(239 68 68); color: white; transition: background-color 0.15s ease;"
|
|
onmouseover="this.style.backgroundColor='rgb(220 38 38)'"
|
|
onmouseout="this.style.backgroundColor='rgb(239 68 68)'"
|
|
@if($status && $status->status !== 'stopped') disabled style="opacity: 0.5;" @endif>
|
|
<x-loading target="deleteDrive" />
|
|
<span wire:loading.remove wire:target="deleteDrive">Delete Drive</span>
|
|
<span wire:loading wire:target="deleteDrive">Deleting...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Reattach Drive Modal -->
|
|
@if($showReattachModal)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto">
|
|
<div class="fixed inset-0 bg-black/50 transition-opacity"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div class="relative w-full max-w-lg transform overflow-hidden rounded-xl bg-background border border-neutral shadow-xl transition-all">
|
|
<div class="flex items-center justify-between p-5 border-b border-neutral">
|
|
<h3 class="text-lg font-semibold">Reattach Drive</h3>
|
|
<button wire:click="closeReattachModal" class="text-foreground-secondary hover:text-foreground transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-5 space-y-4">
|
|
@if($reattachingDriveKey && isset($unusedDrives[$reattachingDriveKey]))
|
|
<div class="bg-background-secondary rounded-lg p-3 border border-neutral">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 rounded-lg bg-info/10">
|
|
<x-ri-hard-drive-3-line class="size-5 text-info" />
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium">{{ $reattachingDriveKey }}</p>
|
|
<p class="text-xs text-foreground-secondary">
|
|
{{ $unusedDrives[$reattachingDriveKey]['size_formatted'] ?? 'Unknown size' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Target Bus Type</label>
|
|
<select wire:model="reattachTargetBus"
|
|
class="w-full px-4 py-2 text-sm rounded-lg border border-neutral bg-background focus:outline-none focus:ring-2 focus:ring-primary/50">
|
|
<option value="">Select bus type...</option>
|
|
@php
|
|
// Calculate next available slot for each bus type
|
|
$busLimits = ['ide' => 4, 'sata' => 6, 'scsi' => 31, 'virtio' => 16];
|
|
$busLabels = ['ide' => 'IDE', 'sata' => 'SATA', 'scsi' => 'SCSI', 'virtio' => 'VirtIO'];
|
|
@endphp
|
|
@foreach($busLimits as $bus => $maxSlots)
|
|
@php
|
|
$nextSlot = null;
|
|
for ($i = 0; $i < $maxSlots; $i++) {
|
|
if (!isset($drives[$bus . $i])) {
|
|
$nextSlot = $i;
|
|
break;
|
|
}
|
|
}
|
|
$isFull = $nextSlot === null;
|
|
@endphp
|
|
<option value="{{ $bus }}" @if($isFull) disabled @endif>
|
|
{{ $busLabels[$bus] }} @if($isFull) (Full) @else (Next: {{ $bus }}{{ $nextSlot }}) @endif
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-2 p-3 rounded-lg bg-info/10 border border-info/30 text-info text-sm">
|
|
<x-ri-information-line class="size-4 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p>The drive will be reattached to the lowest available slot on the selected bus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if($status && $status->status !== 'stopped')
|
|
<div class="flex items-center gap-2 p-3 rounded-lg bg-danger/10 border border-danger/30 text-danger text-sm">
|
|
<x-ri-error-warning-line class="size-4 flex-shrink-0" />
|
|
<span>VM must be stopped to reattach drives.</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 p-5 border-t border-neutral">
|
|
<button wire:click="closeReattachModal"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border border-neutral bg-background hover:bg-background-secondary transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="reattachDrive"
|
|
wire:loading.attr="disabled"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
|
@if(!$reattachTargetBus || ($status && $status->status !== 'stopped')) disabled @endif>
|
|
<x-loading target="reattachDrive" />
|
|
<span wire:loading.remove wire:target="reattachDrive">Reattach Drive</span>
|
|
<span wire:loading wire:target="reattachDrive">Reattaching...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<script>
|
|
document.addEventListener('livewire:initialized', () => {
|
|
Livewire.on('refresh-page', () => {
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 500);
|
|
});
|
|
});
|
|
</script>
|
|
</x-proxmox::layout>
|