148 lines
9.2 KiB
PHP
148 lines
9.2 KiB
PHP
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-800 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
|
</svg>
|
|
Thông tin VMware
|
|
</h2>
|
|
|
|
@if($vmInfo)
|
|
<button wire:click="refreshVMInfo"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm flex items-center"
|
|
wire:loading.attr="disabled"
|
|
wire:loading.class="opacity-50">
|
|
<svg wire:loading.remove class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
<svg wire:loading class="w-4 h-4 mr-1 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
Làm mới
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if($isLoading)
|
|
<div class="flex items-center justify-center py-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span class="ml-2 text-gray-600">Đang tải thông tin...</span>
|
|
</div>
|
|
@elseif($errorMessage)
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-4">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span class="text-red-700">{{ $errorMessage }}</span>
|
|
</div>
|
|
</div>
|
|
@elseif($vmInfo)
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Hardware Information -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-medium text-gray-800 border-b border-gray-200 pb-2">
|
|
Cấu hình phần cứng
|
|
</h3>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
|
</svg>
|
|
CPU:
|
|
</span>
|
|
<span class="font-medium text-gray-800">{{ $vmInfo['cpu'] }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
|
|
</svg>
|
|
RAM:
|
|
</span>
|
|
<span class="font-medium text-gray-800">{{ $vmInfo['ram'] }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
|
|
</svg>
|
|
Disk:
|
|
</span>
|
|
<span class="font-medium text-gray-800">{{ $vmInfo['disk'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status and Dates -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-medium text-gray-800 border-b border-gray-200 pb-2">
|
|
Trạng thái & Thời gian
|
|
</h3>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
Trạng thái:
|
|
</span>
|
|
<span class="font-medium">
|
|
@if ($vmInfo['status'] == 'POWERED_ON')
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Đang chạy</span>
|
|
@elseif($vmInfo['status'] == 'POWERED_OFF')
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Đã dừng</span>
|
|
@elseif($vmInfo['status'] == 'SHUTTING_DOWN')
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Đang tắt</span>
|
|
@elseif($vmInfo['status'] == 'SUSPENDED')
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Tạm dừng</span>
|
|
@else
|
|
<span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">{{ ucfirst($vmInfo['status']) }}</span>
|
|
@endif
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
Ngày tạo:
|
|
</span>
|
|
<span class="font-medium text-gray-800">{{ $vmInfo['created_date'] }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
Ngày hết hạn:
|
|
</span>
|
|
<span class="font-medium text-gray-800">{{ $vmInfo['due_date'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Last Updated Info -->
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
<span>Cập nhật lần cuối: {{ $vmInfo['last_updated'] }}</span>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="text-center py-8">
|
|
<div class="text-gray-500 mb-3">
|
|
<svg class="w-12 h-12 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-gray-600">Dịch vụ này chưa có thông tin VMware hoặc đang trong quá trình khởi tạo.</p>
|
|
|