Nikolay Tatarinov
37cea90b4e
Some checks failed
CI / ci (push) Has been cancelled
- Updated JavaScript to ensure CPU total, free, and usage values are formatted as numbers with one decimal place for consistency. - Modified HTML template to apply float formatting to the displayed free CPU value, enhancing clarity in metrics presentation.
163 lines
8.8 KiB
HTML
163 lines
8.8 KiB
HTML
{% load mathfilters %}
|
|
<!-- QUICK STATS ROW -->
|
|
<section class="grid grid-cols-1 lg:grid-cols-3 gap-4" aria-label="Quick stats">
|
|
<!-- CPU Utilization -->
|
|
<div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsPcpuCard">
|
|
<div class="card-body p-5">
|
|
{% if skeleton %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">CPU Utilization</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="pcpu.usage">—</span> / <span data-stats="pcpu.total">—</span> CPU</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-primary animate-pulse" data-stats="pcpu.used_percentage">—%</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Used</span>
|
|
<span class="font-medium animate-pulse" data-stats="pcpu.usage_val">—</span>
|
|
</div>
|
|
<progress class="progress progress-primary w-full animate-pulse" data-stats="pcpu.progress" value="0" max="100"></progress>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Free</span>
|
|
<span class="font-medium animate-pulse" data-stats="pcpu.free">—</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">CPU Utilization</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5">{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-primary">{{ pcpu.used_percentage|floatformat:1 }}%</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Used</span>
|
|
<span class="font-medium">{{ pcpu.usage|floatformat:1 }} CPU</span>
|
|
</div>
|
|
<progress class="progress progress-primary w-full" value="{{ pcpu.used_percentage }}" max="100"></progress>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Free</span>
|
|
<span class="font-medium">{{ pcpu.free|floatformat:1 }} CPU</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RAM Utilization -->
|
|
<div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsPramCard">
|
|
<div class="card-body p-5">
|
|
{% if skeleton %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">RAM Utilization</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="pram.usage_gb">—</span> / <span data-stats="pram.total_gb">—</span> GB</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-secondary animate-pulse" data-stats="pram.used_percentage">—%</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Used</span>
|
|
<span class="font-medium animate-pulse" data-stats="pram.usage_gb_val">—</span>
|
|
</div>
|
|
<progress class="progress progress-secondary w-full animate-pulse" data-stats="pram.progress" value="0" max="100"></progress>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Free</span>
|
|
<span class="font-medium animate-pulse" data-stats="pram.free_gb">—</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">RAM Utilization</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5">{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-secondary">{{ pram.used_percentage|floatformat:1 }}%</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Used</span>
|
|
<span class="font-medium">{{ pram.usage|convert_bytes }} GB</span>
|
|
</div>
|
|
<progress class="progress progress-secondary w-full" value="{{ pram.used_percentage }}" max="100"></progress>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Free</span>
|
|
<span class="font-medium">{{ pram.free|convert_bytes }} GB</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instance Summary -->
|
|
<div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsVmCard">
|
|
<div class="card-body p-5">
|
|
{% if skeleton %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">Instances</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5 animate-pulse"><span data-stats="vm.active">—</span> active / <span data-stats="vm.stopped">—</span> stopped</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-accent animate-pulse" data-stats="vm.count">—</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-success"></div>
|
|
<span>Most Used Flavor</span>
|
|
</div>
|
|
<span class="font-medium animate-pulse" data-stats="flavors.first_name">—</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-info"></div>
|
|
<span>Avg. vCPU/VM</span>
|
|
</div>
|
|
<span class="font-medium animate-pulse" data-stats="vm.avg_cpu">—</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-warning"></div>
|
|
<span>Density</span>
|
|
</div>
|
|
<span class="font-medium animate-pulse" data-stats="vm.density">—</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-base-content/70">Instances</h3>
|
|
<div class="text-xs text-base-content/60 mt-0.5">{{ vm.active }} active / {{ vm.stopped }} stopped</div>
|
|
</div>
|
|
<div class="text-xl font-bold text-accent">{{ vm.count }}</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-success"></div>
|
|
<span>Most Used Flavor</span>
|
|
</div>
|
|
<span class="font-medium">{{ flavors.first_common_flavor.name }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-info"></div>
|
|
<span>Avg. vCPU/VM</span>
|
|
</div>
|
|
<span class="font-medium">{{ vm.avg_cpu|floatformat:1 }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-warning"></div>
|
|
<span>Density</span>
|
|
</div>
|
|
<span class="font-medium">{{ vm.density|floatformat:1 }}/host</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|