feat: enhance VM console loading UI with a new spinner and status text styles
This commit is contained in:
pbao9
@@ -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
|
||||
<x-admin-breadcrumb :items="$breadcrumbItems" />
|
||||
@endsection
|
||||
@@ -24,81 +24,82 @@
|
||||
<!-- VM Info Card -->
|
||||
<div class="card card-outline card-secondary mb-3">
|
||||
<div class="card-header d-flex bg-white align-items-center justify-content-between">
|
||||
<h5 class="card-title">{{ $vm->name ?? 'VM Console' }} ({{ $vm->vm_id }})</h5>
|
||||
<h5 class="card-title mb-0">{{ $vm->name ?? 'VM Console' }} ({{ $vm->vm_id }})</h5>
|
||||
<div class="card-tools">
|
||||
<x-button-c-r-m route="package.vm.index" label="Tất cả VM"/>
|
||||
<x-button-crm type="button" variant="outline-info" size="sm" route="package.vm.index" icon="list">Tất cả
|
||||
VM</x-button-crm>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Power State</small>
|
||||
<p class="mb-0">{{ $vm->power_state ?? 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">CPU</small>
|
||||
@if($vmStats && isset($vmStats['cpu']))
|
||||
<p class="mb-0">
|
||||
{{ $vmStats['cpu']['cores'] ?? $vm->cpu ?? 'N/A' }} vCore
|
||||
@if(isset($vmStats['cpu']['used_percent']))
|
||||
<span class="badge bg-{{ $vmStats['cpu']['used_percent'] > 80 ? 'danger' : 'success' }} ml-1">
|
||||
{{ $vmStats['cpu']['used_percent'] }}%
|
||||
</span>
|
||||
@endif
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-0">{{ $vm->cpu ?? 'N/A' }} vCore</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">RAM</small>
|
||||
@if($vmStats && isset($vmStats['memory']))
|
||||
<p class="mb-0">
|
||||
{{ $vmStats['memory']['size_GB'] ?? round(($vm->ram_mb ?? 0) / 1024, 2) }} GB
|
||||
@if(isset($vmStats['memory']['used_GB']))
|
||||
<span class="badge bg-{{ $vmStats['memory']['usage_percent'] > 80 ? 'danger' : 'success' }} ml-1">
|
||||
{{ $vmStats['memory']['used_GB'] }} GB ({{ $vmStats['memory']['usage_percent'] }}%)
|
||||
</span>
|
||||
@endif
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-0">{{ $vm->ram_mb ? round($vm->ram_mb / 1024, 2) : 'N/A' }} GB</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Disk</small>
|
||||
@if($vmStats && isset($vmStats['disk']) && count($vmStats['disk']) > 0)
|
||||
<p class="mb-0">
|
||||
@foreach($vmStats['disk'] as $disk)
|
||||
{{ $disk['capacity_GB'] }} GB
|
||||
@endforeach
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-0">N/A</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Datacenter</small>
|
||||
<p class="mb-0">{{ $vm->datacenter->name ?? 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">vCenter</small>
|
||||
<p class="mb-0">
|
||||
@if($vm->datacenter && $vm->datacenter->vCenter)
|
||||
{{ $vm->datacenter->vCenter->host }}
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Power State</small>
|
||||
<p class="mb-0">{{ $vm->power_state ?? 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">CPU</small>
|
||||
@if($vmStats && isset($vmStats['cpu']))
|
||||
<p class="mb-0">
|
||||
{{ $vmStats['cpu']['cores'] ?? $vm->cpu ?? 'N/A' }} vCore
|
||||
@if(isset($vmStats['cpu']['used_percent']))
|
||||
<span class="badge bg-{{ $vmStats['cpu']['used_percent'] > 80 ? 'danger' : 'success' }} ml-1">
|
||||
{{ $vmStats['cpu']['used_percent'] }}%
|
||||
</span>
|
||||
@endif
|
||||
</p>
|
||||
@else
|
||||
N/A
|
||||
<p class="mb-0">{{ $vm->cpu ?? 'N/A' }} vCore</p>
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">RAM</small>
|
||||
@if($vmStats && isset($vmStats['memory']))
|
||||
<p class="mb-0">
|
||||
{{ $vmStats['memory']['size_GB'] ?? round(($vm->ram_mb ?? 0) / 1024, 2) }} GB
|
||||
@if(isset($vmStats['memory']['used_GB']))
|
||||
<span class="badge bg-{{ $vmStats['memory']['usage_percent'] > 80 ? 'danger' : 'success' }} ml-1">
|
||||
{{ $vmStats['memory']['used_GB'] }} GB ({{ $vmStats['memory']['usage_percent'] }}%)
|
||||
</span>
|
||||
@endif
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-0">{{ $vm->ram_mb ? round($vm->ram_mb / 1024, 2) : 'N/A' }} GB</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Disk</small>
|
||||
@if($vmStats && isset($vmStats['disk']) && count($vmStats['disk']) > 0)
|
||||
<p class="mb-0">
|
||||
@foreach($vmStats['disk'] as $disk)
|
||||
{{ $disk['capacity_GB'] }} GB
|
||||
@endforeach
|
||||
</p>
|
||||
@else
|
||||
<p class="mb-0">N/A</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">Datacenter</small>
|
||||
<p class="mb-0">{{ $vm->datacenter->name ?? 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<small class="text-muted">vCenter</small>
|
||||
<p class="mb-0">
|
||||
@if($vm->datacenter && $vm->datacenter->vCenter)
|
||||
{{ $vm->datacenter->vCenter->host }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="card-title fw-bold">Console Controls</h5>
|
||||
<!-- Control Panel -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="card-title fw-bold mb-0">Console Controls</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
@@ -109,16 +110,16 @@
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label> </label>
|
||||
<div class="btn-group d-flex" role="group">
|
||||
<button onclick="enterFullScreen()" class="btn btn-primary btn-sm flex-fill">
|
||||
<i class="fas fa-expand"></i> Fullscreen
|
||||
</button>
|
||||
<button onclick="sendCAD()" class="btn btn-info btn-sm flex-fill">
|
||||
<i class="fas fa-keyboard"></i> Ctrl+Alt+Del
|
||||
</button>
|
||||
<button onclick="sendInputString()" class="btn btn-success btn-sm flex-fill">
|
||||
<i class="fas fa-paper-plane"></i> Send
|
||||
</button>
|
||||
<div class="btn-group d-flex gap-2" role="group">
|
||||
<x-button-c-r-m type="button" variant="primary" size="sm" icon="maximize" onclick="enterFullScreen()" class="flex-fill">
|
||||
Fullscreen
|
||||
</x-button-c-r-m>
|
||||
<x-button-c-r-m type="button" variant="info" size="sm" icon="keyboard" onclick="sendCAD()" class="flex-fill">
|
||||
Ctrl+Alt+Del
|
||||
</x-button-c-r-m>
|
||||
<x-button-c-r-m type="button" variant="success" size="sm" icon="send" onclick="sendInputString()" class="flex-fill">
|
||||
Send
|
||||
</x-button-c-r-m>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,22 +131,22 @@
|
||||
<div class="card-body p-0 position-relative">
|
||||
<!-- Loading State -->
|
||||
<div id="loadingState"
|
||||
class="loading-container d-flex align-items-center justify-content-center text-dark fade-transition"
|
||||
class="loading-container d-flex align-items-center justify-content-center fade-transition"
|
||||
style="height: 70vh;">
|
||||
<div class="text-center">
|
||||
<div class="spinner-box">
|
||||
<div class="three-quarter-spinner"></div>
|
||||
</div>
|
||||
<h5 class="mb-3">Connecting to vCenter...</h5>
|
||||
<p class="text-muted" id="loadingText">Initializing console</p>
|
||||
<div class="loading-dots justify-content-center">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<small class="text-muted" id="connectionStatus">Setting up session...</small>
|
||||
<div class="text-center" style="position: relative; z-index: 1; color: #3b82f6;">
|
||||
<div class="lds-roller mb-4">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<h5 class="loading-title mb-2">Connecting to vCenter</h5>
|
||||
<p class="loading-text mb-1" id="loadingText">Initializing console</p>
|
||||
<small class="loading-status" id="connectionStatus">Setting up session...</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user