Arnike/watcher-visio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance UI with new font integration, improved accessibility focus styles, and refined card shadows for light theme. Update main content area background and adjust layout spacing in index template.

Browse Source
This commit is contained in:
Nikolay Tatarinov
2026-02-06 18:54:29 +03:00
parent 0151b9a01f
commit 38163210d6
3 changed files with 84 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
templates/index.html
View File

@@ -10,19 +10,19 @@
{% block content %}
<!-- MAIN DASHBOARD -->
<div class="p-4 space-y-4" {% if skeleton %}data-dashboard="skeleton"{% endif %}>
<div class="p-4 space-y-8" {% if skeleton %}data-dashboard="skeleton"{% endif %}>
<!-- QUICK STATS ROW -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<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-4">
<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/40 mt-0.5 animate-pulse"><span data-stats="pcpu.usage">—</span> / <span data-stats="pcpu.total">—</span> CPU</div>
<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-lg font-bold text-primary animate-pulse" data-stats="pcpu.used_percentage">—%</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">
@@ -39,9 +39,9 @@
<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/40 mt-0.5">{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU</div>
<div class="text-xs text-base-content/60 mt-0.5">{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU</div>
</div>
<div class="text-lg font-bold text-primary">{{ pcpu.used_percentage|floatformat:1 }}%</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">
@@ -60,14 +60,14 @@
<!-- RAM Utilization -->
<div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsPramCard">
<div class="card-body p-4">
<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/40 mt-0.5 animate-pulse"><span data-stats="pram.usage_gb">—</span> / <span data-stats="pram.total_gb">—</span> GB</div>
<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-lg font-bold text-secondary animate-pulse" data-stats="pram.used_percentage">—%</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">
@@ -84,9 +84,9 @@
<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/40 mt-0.5">{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB</div>
<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-lg font-bold text-secondary">{{ pram.used_percentage|floatformat:1 }}%</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">
@@ -105,14 +105,14 @@
<!-- Instance Summary -->
<div class="card bg-base-100 shadow-sm hover:shadow transition-shadow" id="statsVmCard">
<div class="card-body p-4">
<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/40 mt-0.5 animate-pulse"><span data-stats="vm.active">—</span> active / <span data-stats="vm.stopped">—</span> stopped</div>
<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-lg font-bold text-accent animate-pulse" data-stats="vm.count">—</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">
@@ -141,9 +141,9 @@
<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/40 mt-0.5">{{ vm.active }} active / {{ vm.stopped }} stopped</div>
<div class="text-xs text-base-content/60 mt-0.5">{{ vm.active }} active / {{ vm.stopped }} stopped</div>
</div>
<div class="text-lg font-bold text-accent">{{ vm.count }}</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">
@@ -171,19 +171,19 @@
{% endif %}
</div>
</div>
</div>
</section>
<!-- DETAILED OVERVIEW -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<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" id="statsAllocationCard">
<div class="card-body p-4">
<h3 class="text-sm font-semibold mb-4 flex items-center gap-2">
<div class="card bg-base-100 shadow-sm border-t-2 border-primary" 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
</h3>
</h2>
{% if skeleton %}
<div class="mb-4">
<div class="flex justify-between text-xs mb-1">
@@ -219,8 +219,8 @@
<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/50">overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }}</span>
<span class="text-base-content/50">{{ vcpu.allocated_percentage|floatformat:1 }}% allocated</span>
<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>
@@ -235,8 +235,8 @@
<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/50">overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }}</span>
<span class="text-base-content/50">{{ vram.allocated_percentage|floatformat:1 }}% allocated</span>
<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 %}
@@ -244,15 +244,15 @@
</div>
<!-- Flavor Distribution -->
<div class="card bg-base-100 shadow-sm" id="statsFlavorsCard">
<div class="card-body p-4">
<h3 class="text-sm font-semibold mb-4 flex items-center gap-2">
<div class="card bg-base-100 shadow-sm border-t-2 border-accent" 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
</h3>
</h2>
{% if skeleton %}
<div class="space-y-3">
<div class="bg-base-200/50 rounded-lg p-3">
@@ -310,18 +310,19 @@
{% endif %}
</div>
</div>
</div>
</section>
<!-- AUDIT CONTROL -->
<section aria-label="Audit analysis">
<div class="card bg-base-100 shadow-sm" id="auditSection">
<div class="card-body p-4">
<div class="card-body p-5">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
<div>
<h3 class="text-sm font-semibold">Audit Analysis</h3>
<div class="text-xs text-base-content/50 mt-0.5">Select an audit to analyze resource distribution</div>
<h2 class="text-lg font-semibold">Audit Analysis</h2>
<div class="text-sm text-base-content/60 mt-0.5">Select an audit to analyze resource distribution</div>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-base-content/50" id="auditsCount">{% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %}</span>
<span class="text-xs text-base-content/60" id="auditsCount">{% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %}</span>
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-xs btn-ghost">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -372,19 +373,23 @@
{% endfor %}
{% endif %}
</select>
<button onclick="loadSelectedAudit()" class="btn btn-primary btn-sm">
<button type="button" onclick="loadSelectedAudit()" class="btn btn-primary btn-sm gap-2">
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
Load Analysis
</button>
</div>
</div>
</div>
</section>
<!-- ANALYSIS VISUALIZATION -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<section class="grid grid-cols-1 lg:grid-cols-2 gap-4" aria-label="CPU distribution charts">
<!-- Current State -->
<div class="card bg-base-100 shadow-sm">
<div class="card-body p-4">
<h3 class="text-sm font-semibold mb-4">Current CPU Distribution</h3>
<div class="card-body p-5">
<h3 class="text-lg font-semibold mb-4">Current CPU Distribution</h3>
<div class="h-48">
<canvas id="cpuHostChart"></canvas>
</div>
@@ -403,8 +408,8 @@
<!-- Projected State -->
<div class="card bg-base-100 shadow-sm">
<div class="card-body p-4">
<h3 class="text-sm font-semibold mb-4">Projected CPU Distribution</h3>
<div class="card-body p-5">
<h3 class="text-lg font-semibold mb-4">Projected CPU Distribution</h3>
<div class="h-48">
<canvas id="cpuProjectedChart"></canvas>
</div>
@@ -420,13 +425,14 @@
</div>
</div>
</div>
</div>
</section>
<!-- MIGRATION ACTIONS -->
<section aria-label="Migration actions">
<div class="card bg-base-100 shadow-sm">
<div class="card-body p-4">
<div class="card-body p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold">Migration Actions</h3>
<h3 class="text-lg font-semibold">Migration Actions</h3>
<div class="badge badge-neutral badge-sm" id="migrationCount">Select audit</div>
</div>
@@ -442,7 +448,7 @@
</thead>
<tbody id="migrationTableBody" class="text-sm">
<tr>
<td colspan="4" class="text-center py-6 text-base-content/40">
<td colspan="4" class="text-center py-6 text-base-content/60">
No audit selected. Load an audit to view migration recommendations.
</td>
</tr>
@@ -451,6 +457,7 @@
</div>
</div>
</div>
</section>
</div>
{% endblock %}
@@ -607,7 +614,7 @@
if (!data || !data.migrations || data.migrations.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="4" class="text-center py-6 text-base-content/40">
<td colspan="4" class="text-center py-6 text-base-content/60">
No migration actions recommended
</td>
</tr>
@@ -871,10 +878,10 @@
{% block css %}
<style>
.progress {
@apply h-1.5;
@apply h-2 rounded-full;
}
.table td, .table th {
@apply px-4 py-2;
@apply px-4 py-3;
}
.badge-xs {
@apply px-1.5 py-0.5 text-xs;