Nikolay Tatarinov
6a27fecb13
All checks were successful
CI / ci (push) Successful in 14s
- Introduced a new `stats.py` module to encapsulate dashboard statistics building and cache key constants. - Refactored `views.py` to utilize the new `build_stats` function for constructing metrics context, improving code organization and readability. - Updated Prometheus query handling to streamline metrics fetching with a new `fetch_dashboard_metrics` function. - Enhanced test cases to reflect changes in metrics fetching and context building, ensuring accurate functionality. - Added new HTML templates for displaying detailed resource allocation and flavor statistics on the dashboard.
152 lines
9.1 KiB
HTML
152 lines
9.1 KiB
HTML
{% load mathfilters %}
|
|
<!-- DETAILED OVERVIEW -->
|
|
<section class="grid grid-cols-1 lg:grid-cols-2 gap-4" aria-label="Resource allocation and flavors">
|
|
<!-- Resource Allocation -->
|
|
<div class="card bg-base-100 shadow-sm border-t-gradient-vtb" id="statsAllocationCard">
|
|
<div class="card-body p-5">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
Resource Allocation
|
|
</h2>
|
|
{% if skeleton %}
|
|
<div class="mb-4">
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-base-content/70">CPU Allocation</span>
|
|
<span class="font-medium animate-pulse" data-stats="vcpu.allocated_total">— / — vCPU</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<progress class="progress progress-primary flex-1 animate-pulse" data-stats="vcpu.progress" value="0" max="100"></progress>
|
|
<span class="text-xs font-medium w-12 text-right animate-pulse" data-stats="vcpu.allocated_percentage">—%</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs mt-1 animate-pulse" data-stats="vcpu.overcommit">—</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-base-content/70">RAM Allocation</span>
|
|
<span class="font-medium animate-pulse" data-stats="vram.allocated_total">— / — GB</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<progress class="progress progress-secondary flex-1 animate-pulse" data-stats="vram.progress" value="0" max="100"></progress>
|
|
<span class="text-xs font-medium w-12 text-right animate-pulse" data-stats="vram.allocated_percentage">—%</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs mt-1 animate-pulse" data-stats="vram.overcommit">—</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- CPU Allocation -->
|
|
<div class="mb-4">
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-base-content/70">CPU Allocation</span>
|
|
<span class="font-medium">{{ vcpu.allocated }} / {{ vcpu.total }} vCPU</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<progress class="progress progress-primary flex-1" value="{{ vcpu.allocated_percentage }}" max="100"></progress>
|
|
<span class="text-xs font-medium w-12 text-right">{{ vcpu.allocated_percentage|floatformat:1 }}%</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs mt-1">
|
|
<span class="text-base-content/60">overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }}</span>
|
|
<span class="text-base-content/60">{{ vcpu.allocated_percentage|floatformat:1 }}% allocated</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RAM Allocation -->
|
|
<div>
|
|
<div class="flex justify-between text-xs mb-1">
|
|
<span class="text-base-content/70">RAM Allocation</span>
|
|
<span class="font-medium">{{ vram.allocated|convert_bytes }} / {{ vram.total|convert_bytes }} GB</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<progress class="progress progress-secondary flex-1" value="{{ vram.allocated_percentage }}" max="100"></progress>
|
|
<span class="text-xs font-medium w-12 text-right">{{ vram.allocated_percentage|floatformat:1 }}%</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs mt-1">
|
|
<span class="text-base-content/60">overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }}</span>
|
|
<span class="text-base-content/60">{{ vram.allocated_percentage|floatformat:1 }}% allocated</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flavor Distribution -->
|
|
<div class="card bg-base-100 shadow-sm border-t-gradient-vtb" id="statsFlavorsCard">
|
|
<div class="card-body p-5">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
|
|
</svg>
|
|
Top Flavors
|
|
</h2>
|
|
{% if skeleton %}
|
|
<div class="space-y-3">
|
|
<div class="bg-base-200/50 rounded-lg p-3">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-sm font-medium animate-pulse" data-stats="flavors.first_name">—</span>
|
|
<span class="text-xs badge badge-primary animate-pulse" data-stats="flavors.first_count">— instances</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Share</span>
|
|
<span class="font-medium animate-pulse" data-stats="flavors.first_share">—%</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between items-center text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
|
|
<span class="animate-pulse" data-stats="flavors.second_name">—</span>
|
|
</div>
|
|
<span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.second_count">—</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
|
|
<span class="animate-pulse" data-stats="flavors.third_name">—</span>
|
|
</div>
|
|
<span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.third_count">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="space-y-3">
|
|
<!-- Most Common -->
|
|
<div class="bg-base-200/50 rounded-lg p-3">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-sm font-medium">{{ flavors.first_common_flavor.name }}</span>
|
|
<span class="text-xs badge badge-primary">{{ flavors.first_common_flavor.count }} instances</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-base-content/60">Share</span>
|
|
<span class="font-medium">{{ flavors.first_common_flavor.count|div:vm.count|mul:100|floatformat:0 }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other Flavors -->
|
|
<div class="space-y-2">
|
|
{% if flavors.second_common_flavor %}
|
|
<div class="flex justify-between items-center text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
|
|
<span>{{ flavors.second_common_flavor.name }}</span>
|
|
</div>
|
|
<span class="text-xs badge badge-outline">{{ flavors.second_common_flavor.count }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if flavors.third_common_flavor %}
|
|
<div class="flex justify-between items-center text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
|
|
<span>{{ flavors.third_common_flavor.name }}</span>
|
|
</div>
|
|
<span class="text-xs badge badge-outline">{{ flavors.third_common_flavor.count }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|