refactor: update resource allocation card layout and styling for improved clarity

This commit is contained in:
2025-12-17 13:55:22 -05:00
parent a06b4f54e9
commit 35d504072d

View File

@@ -278,7 +278,7 @@
'entitlement_label' => ($powerStats['starts'] ?? 0) . ' starts • ' . ($powerStats['shutdowns'] ?? 0) . ' shutdowns • ' . ($powerStats['reboots'] ?? 0) . ' reboots',
'description' => 'Shows the live uptime reported by the hypervisor plus counts from the task history.',
'gradient' => 'linear-gradient(90deg, #a855f7 0%, #ec4899 100%)',
'badge' => ['label' => 'Live', 'class' => 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-950/50'],
'badge' => ['label' => 'Live', 'class' => 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900'],
],
];
@@ -303,21 +303,17 @@
$lastSampleTimestamp = now()->toIso8601String();
@endphp
<x-proxmox::ui.card class="mt-8">
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between mb-6">
<x-proxmox::ui.card class="mt-4">
<div class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between mb-4">
<div class="flex items-center gap-2">
<h3 class="text-lg font-semibold">Resource Allocation vs Entitlement</h3>
<x-proxmox::ui.help-modal title="Resource Allocation vs Entitlement">
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
Compares your virtual machine's actual resource consumption against its allocated entitlements, providing real-time visibility into CPU, memory, and uptime metrics.
<h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">Resource Allocation</h3>
<x-proxmox::ui.help-modal title="Resource Allocation">
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
VM resource consumption vs allocated entitlements.
</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">CPU Allocation:</span> Shows live CPU usage as a percentage of your vCPU entitlement. Values are sampled directly from the Proxmox hypervisor and update with each status poll.
</p>
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">Memory Allocation:</span> Displays current RAM usage compared to your provisioned memory entitlement.
</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">CPU:</span> Live usage % of vCPU entitlement.</p>
<p><span class="font-semibold text-gray-700 dark:text-gray-300">Memory:</span> RAM usage vs provisioned.</p>
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
<span class="font-semibold text-base/90">Hypervisor Uptime:</span> Shows the live uptime plus power event statistics from the task history.
</p>