From 73ed05b20f5c723405a338d430e342d3141bb3db Mon Sep 17 00:00:00 2001 From: pbao9 Date: Sun, 15 Feb 2026 12:47:20 +0700 Subject: [PATCH] feat: enhance VM console loading UI with a new spinner and status text styles --- public/css/service/console.css | 138 ++++++------ .../administrator/pages/vm_console.blade.php | 197 +++++++++--------- 2 files changed, 160 insertions(+), 175 deletions(-) diff --git a/public/css/service/console.css b/public/css/service/console.css index 67b17e2..907e0e2 100644 --- a/public/css/service/console.css +++ b/public/css/service/console.css @@ -1,72 +1,84 @@ /* Admin Console */ -/* Loading Animation Styles */ +/* Simple Loading Container */ .loading-container { - background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + background: #1a1a2e; min-height: 500px; position: relative; overflow: hidden; } -.loading-spinner { - width: 60px; - height: 60px; - border: 4px solid rgba(255, 255, 255, 0.2); - border-left: 4px solid #007bff; +/* LDS Roller Spinner */ +.lds-roller, +.lds-roller div, +.lds-roller div:after { + box-sizing: border-box; +} + +.lds-roller { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +.lds-roller div { + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; +} + +.lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 7.2px; + height: 7.2px; border-radius: 50%; - animation: spin 1s linear infinite; + background: currentColor; + margin: -3.6px 0 0 -3.6px; } -@keyframes spin { - 0% { - transform: rotate(0deg); - } +.lds-roller div:nth-child(1) { animation-delay: -0.036s; } +.lds-roller div:nth-child(1):after { top: 62.62742px; left: 62.62742px; } +.lds-roller div:nth-child(2) { animation-delay: -0.072s; } +.lds-roller div:nth-child(2):after { top: 67.71281px; left: 56px; } +.lds-roller div:nth-child(3) { animation-delay: -0.108s; } +.lds-roller div:nth-child(3):after { top: 70.90963px; left: 48.28221px; } +.lds-roller div:nth-child(4) { animation-delay: -0.144s; } +.lds-roller div:nth-child(4):after { top: 72px; left: 40px; } +.lds-roller div:nth-child(5) { animation-delay: -0.18s; } +.lds-roller div:nth-child(5):after { top: 70.90963px; left: 31.71779px; } +.lds-roller div:nth-child(6) { animation-delay: -0.216s; } +.lds-roller div:nth-child(6):after { top: 67.71281px; left: 24px; } +.lds-roller div:nth-child(7) { animation-delay: -0.252s; } +.lds-roller div:nth-child(7):after { top: 62.62742px; left: 17.37258px; } +.lds-roller div:nth-child(8) { animation-delay: -0.288s; } +.lds-roller div:nth-child(8):after { top: 56px; left: 12.28719px; } - 100% { - transform: rotate(360deg); - } +@keyframes lds-roller { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } -.loading-dots { - display: inline-flex; - align-items: center; - gap: 4px; +/* Simple Loading Text */ +.loading-title { + font-size: 1.25rem; + font-weight: 500; + color: #fff; + margin-bottom: 10px; } -.loading-dots span { - width: 8px; - height: 8px; - border-radius: 50%; - background: #007bff; - animation: pulse 1.4s ease-in-out infinite both; +.loading-text { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; } -.loading-dots span:nth-child(1) { - animation-delay: -0.32s; -} - -.loading-dots span:nth-child(2) { - animation-delay: -0.16s; -} - -.loading-dots span:nth-child(3) { - animation-delay: 0s; -} - -@keyframes pulse { - 0%, - 80%, - 100% { - transform: scale(0.7); - opacity: 0.5; - } - - 40% { - transform: scale(1); - opacity: 1; - } +.loading-status { + color: rgba(255, 255, 255, 0.5); + font-size: 0.8rem; } +/* Legacy styles */ .console-container { transition: all 0.5s ease-in-out; min-height: 500px; @@ -76,34 +88,6 @@ transition: opacity 0.4s ease-in-out; } -.spinner-box { - width: 300px; - height: 300px; - display: flex; - justify-content: center; - align-items: center; - background-color: transparent; -} - -.three-quarter-spinner { - width: 50px; - height: 50px; - border: 3px solid #fb5b53; - border-top: 3px solid transparent; - border-radius: 50%; - animation: spin 0.5s linear 0s infinite; -} - -@keyframes spin { - from { - transform: rotate(0); - } - - to { - transform: rotate(359deg); - } -} - /* User Console */ .console-container { diff --git a/resources/views/administrator/pages/vm_console.blade.php b/resources/views/administrator/pages/vm_console.blade.php index 55a3cb2..4549927 100644 --- a/resources/views/administrator/pages/vm_console.blade.php +++ b/resources/views/administrator/pages/vm_console.blade.php @@ -7,12 +7,12 @@ @section('breadcrumb') @php - $breadcrumbItems = [ - ['label' => 'Modules'], - ['label' => 'Package vCenter'], - ['label' => 'Virtual Machine', 'route' => 'package.vm.index'], - ['label' => $vm->name ?? $vm->vm_id ?? 'Console', 'active' => true], - ]; +$breadcrumbItems = [ + ['label' => 'Modules'], + ['label' => 'Package vCenter'], + ['label' => 'Virtual Machine', 'route' => 'package.vm.index'], + ['label' => $vm->name ?? $vm->vm_id ?? 'Console', 'active' => true], +]; @endphp @endsection @@ -24,81 +24,82 @@
-
{{ $vm->name ?? 'VM Console' }} ({{ $vm->vm_id }})
+
{{ $vm->name ?? 'VM Console' }} ({{ $vm->vm_id }})
- + Tất cả + VM
-
-
-
-
- Power State -

{{ $vm->power_state ?? 'N/A' }}

-
-
- CPU - @if($vmStats && isset($vmStats['cpu'])) -

- {{ $vmStats['cpu']['cores'] ?? $vm->cpu ?? 'N/A' }} vCore - @if(isset($vmStats['cpu']['used_percent'])) - - {{ $vmStats['cpu']['used_percent'] }}% - - @endif -

- @else -

{{ $vm->cpu ?? 'N/A' }} vCore

- @endif -
-
- RAM - @if($vmStats && isset($vmStats['memory'])) -

- {{ $vmStats['memory']['size_GB'] ?? round(($vm->ram_mb ?? 0) / 1024, 2) }} GB - @if(isset($vmStats['memory']['used_GB'])) - - {{ $vmStats['memory']['used_GB'] }} GB ({{ $vmStats['memory']['usage_percent'] }}%) - - @endif -

- @else -

{{ $vm->ram_mb ? round($vm->ram_mb / 1024, 2) : 'N/A' }} GB

- @endif -
-
- Disk - @if($vmStats && isset($vmStats['disk']) && count($vmStats['disk']) > 0) -

- @foreach($vmStats['disk'] as $disk) - {{ $disk['capacity_GB'] }} GB - @endforeach -

- @else -

N/A

- @endif -
-
- Datacenter -

{{ $vm->datacenter->name ?? 'N/A' }}

-
-
- vCenter -

- @if($vm->datacenter && $vm->datacenter->vCenter) - {{ $vm->datacenter->vCenter->host }} +

+
+
+
+ Power State +

{{ $vm->power_state ?? 'N/A' }}

+
+
+ CPU + @if($vmStats && isset($vmStats['cpu'])) +

+ {{ $vmStats['cpu']['cores'] ?? $vm->cpu ?? 'N/A' }} vCore + @if(isset($vmStats['cpu']['used_percent'])) + + {{ $vmStats['cpu']['used_percent'] }}% + + @endif +

@else - N/A +

{{ $vm->cpu ?? 'N/A' }} vCore

@endif -

+
+
+ RAM + @if($vmStats && isset($vmStats['memory'])) +

+ {{ $vmStats['memory']['size_GB'] ?? round(($vm->ram_mb ?? 0) / 1024, 2) }} GB + @if(isset($vmStats['memory']['used_GB'])) + + {{ $vmStats['memory']['used_GB'] }} GB ({{ $vmStats['memory']['usage_percent'] }}%) + + @endif +

+ @else +

{{ $vm->ram_mb ? round($vm->ram_mb / 1024, 2) : 'N/A' }} GB

+ @endif +
+
+ Disk + @if($vmStats && isset($vmStats['disk']) && count($vmStats['disk']) > 0) +

+ @foreach($vmStats['disk'] as $disk) + {{ $disk['capacity_GB'] }} GB + @endforeach +

+ @else +

N/A

+ @endif +
+
+ Datacenter +

{{ $vm->datacenter->name ?? 'N/A' }}

+
+
+ vCenter +

+ @if($vm->datacenter && $vm->datacenter->vCenter) + {{ $vm->datacenter->vCenter->host }} + @else + N/A + @endif +

+
-
-
+
- -
-
-
Console Controls
+ +
+
+
Console Controls
@@ -109,16 +110,16 @@
-
- - - +
+ + Fullscreen + + + Ctrl+Alt+Del + + + Send +
@@ -130,22 +131,22 @@
-
- -
Connecting to vCenter...
-

Initializing console

-
- - - -
-
- Setting up session... +
+
+
+
+
+
+
+
+
+
+
Connecting to vCenter
+

Initializing console

+ Setting up session...