refactor: add comprehensive server information section with resource and usage details
This commit is contained in:
@@ -893,6 +893,293 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Information Section -->
|
||||
@php
|
||||
// Gather comprehensive server information
|
||||
$diskTotal = (int)($status->maxdisk ?? 0);
|
||||
$diskUsed = (int)($status->disk ?? 0);
|
||||
$diskPercent = $diskTotal > 0 ? round(($diskUsed / $diskTotal) * 100, 1) : 0;
|
||||
|
||||
// Get product settings for allocated resources
|
||||
$productSettings = $server->service?->product?->settings ?? collect();
|
||||
$allocatedCores = $productSettings->where('key', 'cores')->first()?->value ?? $cpuCores;
|
||||
$allocatedMemoryMiB = $productSettings->where('key', 'memory')->first()?->value ?? 0;
|
||||
$allocatedDiskGiB = $productSettings->where('key', 'disk')->first()?->value ?? 0;
|
||||
$allocatedBackups = $productSettings->where('key', 'backups')->first()?->value ?? 0;
|
||||
|
||||
// Network totals
|
||||
$totalNetIn = (int)($status->netin ?? 0);
|
||||
$totalNetOut = (int)($status->netout ?? 0);
|
||||
|
||||
// Service/billing info
|
||||
$servicePlan = $server->service?->plan;
|
||||
$serviceExpires = $server->service?->expires_at;
|
||||
$serviceStatus = $server->service?->status ?? 'unknown';
|
||||
$productName = $server->service?->product?->name ?? 'Unknown Product';
|
||||
|
||||
// Location info
|
||||
$locationName = $server->node?->location?->name ?? 'Unknown';
|
||||
$nodeName = $server->node?->name ?? 'Unknown';
|
||||
@endphp
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-base font-semibold">Server Information</h2>
|
||||
<x-proxmox::ui.help-modal title="Server Information">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
||||
Comprehensive details about your virtual machine including specifications, billing, and infrastructure information.
|
||||
</p>
|
||||
<div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
|
||||
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Specifications:</span> Allocated CPU, RAM, and storage resources.</p>
|
||||
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Network:</span> Total bandwidth consumed since VM creation.</p>
|
||||
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Billing:</span> Service plan and renewal information.</p>
|
||||
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Infrastructure:</span> Datacenter location and node assignment.</p>
|
||||
</div>
|
||||
</x-proxmox::ui.help-modal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<!-- Specifications Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-blue-100 dark:bg-blue-900">
|
||||
<x-ri-cpu-line class="size-4 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Specifications</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">vCPU Cores</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $allocatedCores }} cores</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Memory</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">
|
||||
@if($allocatedMemoryMiB > 0)
|
||||
{{ number_format($allocatedMemoryMiB / 1024, 1) }} GiB
|
||||
@else
|
||||
{{ \Illuminate\Support\Number::fileSize(bytes: $memoryTotal) }}
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Storage</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">
|
||||
@if($allocatedDiskGiB > 0)
|
||||
{{ $allocatedDiskGiB }} GiB
|
||||
@elseif($diskTotal > 0)
|
||||
{{ number_format($diskTotal / 1024 / 1024 / 1024, 0) }} GiB
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Backup Slots</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $allocatedBackups > 0 ? $allocatedBackups : 'Disabled' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Operating System</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $server->os->name ?? 'Unknown' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Statistics Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-green-100 dark:bg-green-900">
|
||||
<x-ri-global-line class="size-4 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Network Statistics</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Primary IPv4</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200">{{ $server->primaryIpv4?->address ?? 'Not assigned' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Primary IPv6</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200 text-xs">{{ $server->primaryIpv6?->address ? \Illuminate\Support\Str::limit($server->primaryIpv6->address, 20) : 'Not assigned' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Total Inbound</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ \Illuminate\Support\Number::fileSize(bytes: $totalNetIn) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Total Outbound</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ \Illuminate\Support\Number::fileSize(bytes: $totalNetOut) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Combined Transfer</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ \Illuminate\Support\Number::fileSize(bytes: $totalNetIn + $totalNetOut) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Billing & Service Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-purple-100 dark:bg-purple-900">
|
||||
<x-ri-calendar-line class="size-4 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Billing & Service</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Product</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ \Illuminate\Support\Str::limit($productName, 20) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Billing Cycle</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ ucfirst($servicePlan?->billing_period ?? 'N/A') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Service Status</span>
|
||||
<span class="font-medium {{ $serviceStatus === 'active' ? 'text-green-600 dark:text-green-400' : 'text-amber-600 dark:text-amber-400' }}">
|
||||
{{ ucfirst($serviceStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Next Renewal</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">
|
||||
{{ $serviceExpires ? $serviceExpires->format('M d, Y') : 'N/A' }}
|
||||
</span>
|
||||
</div>
|
||||
@if($serviceExpires)
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Days Until Renewal</span>
|
||||
<span class="font-medium {{ $serviceExpires->diffInDays(now()) <= 7 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-800 dark:text-gray-200' }}">
|
||||
{{ $serviceExpires->diffInDays(now()) }} days
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infrastructure Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-amber-100 dark:bg-amber-900">
|
||||
<x-ri-building-line class="size-4 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Infrastructure</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Datacenter</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $locationName }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Hypervisor Node</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $nodeName }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">VM ID</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200">{{ $server->vm_id ?? 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">VNC Console</span>
|
||||
<span class="font-medium {{ $server->node?->vnc_enabled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}">
|
||||
{{ $server->node?->vnc_enabled ? 'Enabled' : 'Disabled' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Virtualization</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">KVM/QEMU</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Identifiers Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-cyan-100 dark:bg-cyan-900">
|
||||
<x-ri-fingerprint-line class="size-4 text-cyan-600 dark:text-cyan-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Identifiers</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Server ID</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200">{{ $server->id }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Service ID</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200">{{ $server->service_id ?? 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Hostname</span>
|
||||
<span class="font-medium font-mono text-gray-800 dark:text-gray-200">{{ $server->hostname ?? 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Created</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $server->created_at?->format('M d, Y') ?? 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Last Modified</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $server->updated_at?->diffForHumans() ?? 'N/A' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Usage Card -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="flex items-center justify-center w-7 h-7 rounded bg-rose-100 dark:bg-rose-900">
|
||||
<x-ri-line-chart-line class="size-4 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Current Usage</h3>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500 dark:text-gray-400">CPU Usage</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 rounded-full" style="width: {{ min(100, $cpuUsagePercent) }}%"></div>
|
||||
</div>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200 text-xs w-12 text-right">{{ $cpuUsagePercent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500 dark:text-gray-400">Memory Usage</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-green-500 rounded-full" style="width: {{ min(100, $memoryPercent) }}%"></div>
|
||||
</div>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200 text-xs w-12 text-right">{{ $memoryPercent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@if($diskTotal > 0)
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500 dark:text-gray-400">Disk Usage</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-purple-500 rounded-full" style="width: {{ min(100, $diskPercent) }}%"></div>
|
||||
</div>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200 text-xs w-12 text-right">{{ $diskPercent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Uptime</span>
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200">{{ $reportedUptime }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500 dark:text-gray-400">Power State</span>
|
||||
<span class="font-medium {{ $status && $status->status === 'running' ? 'text-green-600 dark:text-green-400' : 'text-amber-600 dark:text-amber-400' }}">
|
||||
{{ $status && $status->status === 'running' ? 'Running' : 'Stopped' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@once
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user