From 6a27fecb132fdb39e2631dd60f05eaef9f6899c8 Mon Sep 17 00:00:00 2001 From: Nikolay Tatarinov Date: Sat, 7 Feb 2026 18:39:28 +0300 Subject: [PATCH] Add dashboard statistics module and refactor views for metrics handling - 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. --- dashboard/prometheus_utils/query.py | 48 + dashboard/stats.py | 76 ++ dashboard/tests/test_views.py | 6 +- dashboard/views.py | 259 +----- static/js/dashboard.js | 309 +++++++ templates/dashboard/_allocation_flavors.html | 151 ++++ templates/dashboard/_audit_section.html | 71 ++ templates/dashboard/_chart_migrations.html | 53 ++ templates/dashboard/_stats_cards.html | 162 ++++ templates/index.html | 871 +------------------ watcher_visio/settings.py | 2 +- 11 files changed, 925 insertions(+), 1083 deletions(-) create mode 100644 dashboard/stats.py create mode 100644 static/js/dashboard.js create mode 100644 templates/dashboard/_allocation_flavors.html create mode 100644 templates/dashboard/_audit_section.html create mode 100644 templates/dashboard/_chart_migrations.html create mode 100644 templates/dashboard/_stats_cards.html diff --git a/dashboard/prometheus_utils/query.py b/dashboard/prometheus_utils/query.py index 0a5d093..03f4553 100644 --- a/dashboard/prometheus_utils/query.py +++ b/dashboard/prometheus_utils/query.py @@ -1,9 +1,37 @@ +from concurrent.futures import ThreadPoolExecutor, as_completed + import requests from watcher_visio.settings import PROMETHEUS_URL # Timeout for lightweight health check (seconds) CHECK_TIMEOUT = 5 +# Dashboard Prometheus queries (query_key -> query string), run in parallel +DASHBOARD_QUERIES = { + "hosts_total": "count(node_exporter_build_info{job='node_exporter_compute'})", + "pcpu_total": ( + "sum(count(node_cpu_seconds_total{job='node_exporter_compute', mode='idle'}) " + "without (cpu,mode))" + ), + "pcpu_usage": "sum(node_load5{job='node_exporter_compute'})", + "vcpu_allocated": "sum(libvirt_domain_info_virtual_cpus)", + "vcpu_overcommit_max": ( + "avg(openstack_placement_resource_allocation_ratio{resourcetype='VCPU'})" + ), + "pram_total": "sum(node_memory_MemTotal_bytes{job='node_exporter_compute'})", + "pram_usage": "sum(node_memory_Active_bytes{job='node_exporter_compute'})", + "vram_allocated": "sum(libvirt_domain_info_maximum_memory_bytes)", + "vram_overcommit_max": ( + "avg(avg_over_time(" + "openstack_placement_resource_allocation_ratio{resourcetype='MEMORY_MB'}[5m]))" + ), + "vm_count": "sum(libvirt_domain_state_code)", + "vm_active": "sum(libvirt_domain_state_code{stateDesc='the domain is running'})", +} + +# Keys that should be parsed as float (rest as int) +DASHBOARD_FLOAT_KEYS = frozenset(("pcpu_usage", "vcpu_overcommit_max", "vram_overcommit_max")) + def check_prometheus() -> dict: """ @@ -36,3 +64,23 @@ def query_prometheus(query: str) -> str | list[str]: return result else: return result[0]["value"][1] + + +def fetch_dashboard_metrics() -> dict: + """Run all dashboard Prometheus queries in parallel and return a dict of name -> value.""" + result = {} + with ThreadPoolExecutor(max_workers=len(DASHBOARD_QUERIES)) as executor: + future_to_key = { + executor.submit(query_prometheus, query=q): key for key, q in DASHBOARD_QUERIES.items() + } + for future in as_completed(future_to_key): + key = future_to_key[future] + try: + raw = future.result() + if key in DASHBOARD_FLOAT_KEYS: + result[key] = float(raw) + else: + result[key] = int(raw) + except (ValueError, TypeError): + result[key] = float(0) if key in DASHBOARD_FLOAT_KEYS else 0 + return result diff --git a/dashboard/stats.py b/dashboard/stats.py new file mode 100644 index 0000000..a6eb75a --- /dev/null +++ b/dashboard/stats.py @@ -0,0 +1,76 @@ +"""Dashboard statistics building and cache key constants.""" + +# Cache keys used by views +CACHE_KEY_STATS = "dashboard_stats" +CACHE_KEY_AUDITS = "dashboard_audits" +CACHE_KEY_CURRENT_CLUSTER = "dashboard_current_cluster" +CACHE_KEY_SOURCE_STATUS = "dashboard_source_status" + +# Empty structures for skeleton context (same shape as build_stats output) +EMPTY_FLAVORS = { + "first_common_flavor": {"name": "—", "count": 0}, + "second_common_flavor": None, + "third_common_flavor": None, +} + + +def build_stats(metrics: dict, region_name: str, flavors: dict) -> dict: + """ + Build stats dict from raw metrics and OpenStack-derived data. + Returns region, pcpu, vcpu, pram, vram, vm, flavors (no audits/current_cluster). + """ + hosts_total = metrics.get("hosts_total") or 1 + pcpu_total = metrics.get("pcpu_total", 0) + pcpu_usage = metrics.get("pcpu_usage", 0) + vcpu_allocated = metrics.get("vcpu_allocated", 0) + vcpu_overcommit_max = metrics.get("vcpu_overcommit_max", 0) + pram_total = metrics.get("pram_total", 0) + pram_usage = metrics.get("pram_usage", 0) + vram_allocated = metrics.get("vram_allocated", 0) + vram_overcommit_max = metrics.get("vram_overcommit_max", 0) + vm_count = metrics.get("vm_count", 0) + vm_active = metrics.get("vm_active", 0) + + vcpu_total = pcpu_total * vcpu_overcommit_max + vram_total = pram_total * vram_overcommit_max + + return { + "region": {"name": region_name, "hosts_total": hosts_total}, + "pcpu": { + "total": pcpu_total, + "usage": pcpu_usage, + "free": pcpu_total - pcpu_usage, + "used_percentage": (pcpu_usage / pcpu_total * 100) if pcpu_total else 0, + }, + "vcpu": { + "total": vcpu_total, + "allocated": vcpu_allocated, + "free": vcpu_total - vcpu_allocated, + "allocated_percentage": (vcpu_allocated / vcpu_total * 100) if vcpu_total else 0, + "overcommit_ratio": (vcpu_allocated / pcpu_total) if pcpu_total else 0, + "overcommit_max": vcpu_overcommit_max, + }, + "pram": { + "total": pram_total, + "usage": pram_usage, + "free": pram_total - pram_usage, + "used_percentage": (pram_usage / pram_total * 100) if pram_total else 0, + }, + "vram": { + "total": vram_total, + "allocated": vram_allocated, + "free": vram_total - vram_allocated, + "allocated_percentage": (vram_allocated / vram_total * 100) if vram_total else 0, + "overcommit_ratio": (vram_allocated / pram_total) if pram_total else 0, + "overcommit_max": vram_overcommit_max, + }, + "vm": { + "count": vm_count, + "active": vm_active, + "stopped": vm_count - vm_active, + "avg_cpu": vcpu_allocated / vm_count if vm_count else 0, + "avg_ram": vram_allocated / vm_count if vm_count else 0, + "density": vm_count / hosts_total if hosts_total else 0, + }, + "flavors": flavors, + } diff --git a/dashboard/tests/test_views.py b/dashboard/tests/test_views.py index 042fff6..813e0dd 100644 --- a/dashboard/tests/test_views.py +++ b/dashboard/tests/test_views.py @@ -96,7 +96,7 @@ class CollectContextTest(TestCase): return conn @patch("dashboard.views.get_current_cluster_cpu") - @patch("dashboard.views._fetch_prometheus_metrics") + @patch("dashboard.views.fetch_dashboard_metrics") @patch("dashboard.views.get_audits") @patch("dashboard.views.get_flavor_list") @patch("dashboard.views.get_connection") @@ -152,8 +152,6 @@ class CollectContextTest(TestCase): self.assertEqual(context["flavors"]["first_common_flavor"]["name"], "m1.small") self.assertEqual(len(context["audits"]), 1) # Serialized for JS - import json - self.assertIsInstance(context["audits"][0]["migrations"], str) self.assertEqual(json.loads(context["audits"][0]["host_labels"]), ["h0", "h1"]) self.assertIn("current_cluster", context) @@ -167,7 +165,7 @@ class ApiStatsTest(TestCase): def setUp(self): self.factory = RequestFactory() - @patch("dashboard.views._fetch_prometheus_metrics") + @patch("dashboard.views.fetch_dashboard_metrics") @patch("dashboard.views.get_flavor_list") @patch("dashboard.views.get_connection") def test_api_stats_returns_json_with_expected_keys( diff --git a/dashboard/views.py b/dashboard/views.py index 3da163b..c6aa561 100644 --- a/dashboard/views.py +++ b/dashboard/views.py @@ -1,5 +1,4 @@ import json -from concurrent.futures import ThreadPoolExecutor, as_completed from django.conf import settings from django.core.cache import cache @@ -10,53 +9,32 @@ from dashboard.mock_data import get_mock_context from dashboard.openstack_utils.audits import get_audits, get_current_cluster_cpu from dashboard.openstack_utils.connect import check_openstack, get_connection from dashboard.openstack_utils.flavor import get_flavor_list -from dashboard.prometheus_utils.query import check_prometheus, query_prometheus - -# Prometheus queries run in parallel (query_key -> query string) -_PROMETHEUS_QUERIES = { - "hosts_total": "count(node_exporter_build_info{job='node_exporter_compute'})", - "pcpu_total": ( - "sum(count(node_cpu_seconds_total{job='node_exporter_compute', mode='idle'}) " - "without (cpu,mode))" - ), - "pcpu_usage": "sum(node_load5{job='node_exporter_compute'})", - "vcpu_allocated": "sum(libvirt_domain_info_virtual_cpus)", - "vcpu_overcommit_max": ( - "avg(openstack_placement_resource_allocation_ratio{resourcetype='VCPU'})" - ), - "pram_total": "sum(node_memory_MemTotal_bytes{job='node_exporter_compute'})", - "pram_usage": "sum(node_memory_Active_bytes{job='node_exporter_compute'})", - "vram_allocated": "sum(libvirt_domain_info_maximum_memory_bytes)", - "vram_overcommit_max": ( - "avg(avg_over_time(" - "openstack_placement_resource_allocation_ratio{resourcetype='MEMORY_MB'}[5m]))" - ), - "vm_count": "sum(libvirt_domain_state_code)", - "vm_active": "sum(libvirt_domain_state_code{stateDesc='the domain is running'})", -} +from dashboard.prometheus_utils.query import check_prometheus, fetch_dashboard_metrics +from dashboard.stats import ( + CACHE_KEY_AUDITS, + CACHE_KEY_CURRENT_CLUSTER, + CACHE_KEY_SOURCE_STATUS, + CACHE_KEY_STATS, + EMPTY_FLAVORS, + build_stats, +) -def _fetch_prometheus_metrics(): - """Run all Prometheus queries in parallel and return a dict of name -> value.""" - result = {} - with ThreadPoolExecutor(max_workers=len(_PROMETHEUS_QUERIES)) as executor: - future_to_key = { - executor.submit(query_prometheus, query=q): key - for key, q in _PROMETHEUS_QUERIES.items() - } - for future in as_completed(future_to_key): - key = future_to_key[future] - try: - raw = future.result() - if key in ("pcpu_usage", "vcpu_overcommit_max", "vram_overcommit_max"): - result[key] = float(raw) - else: - result[key] = int(raw) - except (ValueError, TypeError): - result[key] = ( - 0 if key in ("pcpu_usage", "vcpu_overcommit_max", "vram_overcommit_max") else 0 - ) - return result +def _empty_metrics(): + """Metrics dict with zero/default values for skeleton context.""" + return { + "hosts_total": 0, + "pcpu_total": 0, + "pcpu_usage": 0, + "vcpu_allocated": 0, + "vcpu_overcommit_max": 0, + "pram_total": 0, + "pram_usage": 0, + "vram_allocated": 0, + "vram_overcommit_max": 0, + "vm_count": 0, + "vm_active": 0, + } def collect_context(): @@ -64,81 +42,14 @@ def collect_context(): region_name = connection._compute_region flavors = get_flavor_list(connection=connection) audits = get_audits(connection=connection) - - metrics = _fetch_prometheus_metrics() - hosts_total = metrics.get("hosts_total") or 1 - pcpu_total = metrics.get("pcpu_total", 0) - pcpu_usage = metrics.get("pcpu_usage", 0) - vcpu_allocated = metrics.get("vcpu_allocated", 0) - vcpu_overcommit_max = metrics.get("vcpu_overcommit_max", 0) - pram_total = metrics.get("pram_total", 0) - pram_usage = metrics.get("pram_usage", 0) - vram_allocated = metrics.get("vram_allocated", 0) - vram_overcommit_max = metrics.get("vram_overcommit_max", 0) - vm_count = metrics.get("vm_count", 0) - vm_active = metrics.get("vm_active", 0) - - vcpu_total = pcpu_total * vcpu_overcommit_max - vram_total = pram_total * vram_overcommit_max - - context = { - # <--- Region data ---> - "region": { - "name": region_name, - "hosts_total": hosts_total, - }, - # <--- CPU data ---> - # pCPU data - "pcpu": { - "total": pcpu_total, - "usage": pcpu_usage, - "free": pcpu_total - pcpu_usage, - "used_percentage": (pcpu_usage / pcpu_total * 100) if pcpu_total else 0, - }, - # vCPU data - "vcpu": { - "total": vcpu_total, - "allocated": vcpu_allocated, - "free": vcpu_total - vcpu_allocated, - "allocated_percentage": (vcpu_allocated / vcpu_total * 100) if vcpu_total else 0, - "overcommit_ratio": (vcpu_allocated / pcpu_total) if pcpu_total else 0, - "overcommit_max": vcpu_overcommit_max, - }, - # <--- RAM data ---> - # pRAM data - "pram": { - "total": pram_total, - "usage": pram_usage, - "free": pram_total - pram_usage, - "used_percentage": (pram_usage / pram_total * 100) if pram_total else 0, - }, - # vRAM data - "vram": { - "total": vram_total, - "allocated": vram_allocated, - "free": vram_total - vram_allocated, - "allocated_percentage": (vram_allocated / vram_total * 100) if vram_total else 0, - "overcommit_ratio": (vram_allocated / pram_total) if pram_total else 0, - "overcommit_max": vram_overcommit_max, - }, - # <--- VM data ---> - "vm": { - "count": vm_count, - "active": vm_active, - "stopped": vm_count - vm_active, - "avg_cpu": vcpu_allocated / vm_count if vm_count else 0, - "avg_ram": vram_allocated / vm_count if vm_count else 0, - "density": vm_count / hosts_total if hosts_total else 0, - }, - "flavors": flavors, - "audits": audits, - } + metrics = fetch_dashboard_metrics() + context = build_stats(metrics, region_name, flavors) + context["audits"] = audits current_cluster = get_current_cluster_cpu(connection) context["current_cluster"] = { "host_labels": json.dumps(current_cluster["host_labels"]), "cpu_current": json.dumps(current_cluster["cpu_current"]), } - # Serialize audit list fields for JavaScript so cached context is render-ready for audit in context["audits"]: audit["migrations"] = json.dumps(audit["migrations"]) audit["host_labels"] = json.dumps(audit["host_labels"]) @@ -152,60 +63,8 @@ def collect_stats(): connection = get_connection() region_name = connection._compute_region flavors = get_flavor_list(connection=connection) - metrics = _fetch_prometheus_metrics() - hosts_total = metrics.get("hosts_total") or 1 - pcpu_total = metrics.get("pcpu_total", 0) - pcpu_usage = metrics.get("pcpu_usage", 0) - vcpu_allocated = metrics.get("vcpu_allocated", 0) - vcpu_overcommit_max = metrics.get("vcpu_overcommit_max", 0) - pram_total = metrics.get("pram_total", 0) - pram_usage = metrics.get("pram_usage", 0) - vram_allocated = metrics.get("vram_allocated", 0) - vram_overcommit_max = metrics.get("vram_overcommit_max", 0) - vm_count = metrics.get("vm_count", 0) - vm_active = metrics.get("vm_active", 0) - vcpu_total = pcpu_total * vcpu_overcommit_max - vram_total = pram_total * vram_overcommit_max - return { - "region": {"name": region_name, "hosts_total": hosts_total}, - "pcpu": { - "total": pcpu_total, - "usage": pcpu_usage, - "free": pcpu_total - pcpu_usage, - "used_percentage": (pcpu_usage / pcpu_total * 100) if pcpu_total else 0, - }, - "vcpu": { - "total": vcpu_total, - "allocated": vcpu_allocated, - "free": vcpu_total - vcpu_allocated, - "allocated_percentage": (vcpu_allocated / vcpu_total * 100) if vcpu_total else 0, - "overcommit_ratio": (vcpu_allocated / pcpu_total) if pcpu_total else 0, - "overcommit_max": vcpu_overcommit_max, - }, - "pram": { - "total": pram_total, - "usage": pram_usage, - "free": pram_total - pram_usage, - "used_percentage": (pram_usage / pram_total * 100) if pram_total else 0, - }, - "vram": { - "total": vram_total, - "allocated": vram_allocated, - "free": vram_total - vram_allocated, - "allocated_percentage": (vram_allocated / vram_total * 100) if vram_total else 0, - "overcommit_ratio": (vram_allocated / pram_total) if pram_total else 0, - "overcommit_max": vram_overcommit_max, - }, - "vm": { - "count": vm_count, - "active": vm_active, - "stopped": vm_count - vm_active, - "avg_cpu": vcpu_allocated / vm_count if vm_count else 0, - "avg_ram": vram_allocated / vm_count if vm_count else 0, - "density": vm_count / hosts_total if hosts_total else 0, - }, - "flavors": flavors, - } + metrics = fetch_dashboard_metrics() + return build_stats(metrics, region_name, flavors) def collect_audits(): @@ -222,40 +81,14 @@ def collect_audits(): def _skeleton_context(): """Minimal context for skeleton-only index render.""" - empty_flavors = { - "first_common_flavor": {"name": "—", "count": 0}, - "second_common_flavor": None, - "third_common_flavor": None, - } - return { - "skeleton": True, - "region": {"name": "—", "hosts_total": 0}, - "pcpu": {"total": 0, "usage": 0, "free": 0, "used_percentage": 0}, - "pram": {"total": 0, "usage": 0, "free": 0, "used_percentage": 0}, - "vcpu": { - "total": 0, - "allocated": 0, - "free": 0, - "allocated_percentage": 0, - "overcommit_ratio": 0, - "overcommit_max": 0, - }, - "vram": { - "total": 0, - "allocated": 0, - "free": 0, - "allocated_percentage": 0, - "overcommit_ratio": 0, - "overcommit_max": 0, - }, - "vm": {"count": 0, "active": 0, "stopped": 0, "avg_cpu": 0, "avg_ram": 0, "density": 0}, - "flavors": empty_flavors, - "audits": [], - "current_cluster": { - "host_labels": "[]", - "cpu_current": "[]", - }, + context = build_stats(_empty_metrics(), "—", EMPTY_FLAVORS) + context["skeleton"] = True + context["audits"] = [] + context["current_cluster"] = { + "host_labels": "[]", + "cpu_current": "[]", } + return context def index(request): @@ -267,28 +100,25 @@ def index(request): def api_stats(request): - cache_key = "dashboard_stats" cache_ttl = getattr(settings, "DASHBOARD_CACHE_TTL", 120) - data = cache.get(cache_key) + data = cache.get(CACHE_KEY_STATS) if data is None: data = collect_stats() - cache.set(cache_key, data, timeout=cache_ttl) + cache.set(CACHE_KEY_STATS, data, timeout=cache_ttl) return JsonResponse(data) def api_audits(request): - cache_key_audits = "dashboard_audits" - cache_key_cluster = "dashboard_current_cluster" cache_ttl = getattr(settings, "DASHBOARD_CACHE_TTL", 120) - audits = cache.get(cache_key_audits) - current_cluster = cache.get(cache_key_cluster) + audits = cache.get(CACHE_KEY_AUDITS) + current_cluster = cache.get(CACHE_KEY_CURRENT_CLUSTER) if audits is None: audits = collect_audits() - cache.set(cache_key_audits, audits, timeout=cache_ttl) + cache.set(CACHE_KEY_AUDITS, audits, timeout=cache_ttl) if current_cluster is None: connection = get_connection() current_cluster = get_current_cluster_cpu(connection) - cache.set(cache_key_cluster, current_cluster, timeout=cache_ttl) + cache.set(CACHE_KEY_CURRENT_CLUSTER, current_cluster, timeout=cache_ttl) return JsonResponse({"audits": audits, "current_cluster": current_cluster}) @@ -302,13 +132,12 @@ def api_source_status(request): } ) - cache_key = "dashboard_source_status" cache_ttl = getattr(settings, "SOURCE_STATUS_CACHE_TTL", 30) - data = cache.get(cache_key) + data = cache.get(CACHE_KEY_SOURCE_STATUS) if data is None: data = { "prometheus": check_prometheus(), "openstack": check_openstack(), } - cache.set(cache_key, data, timeout=cache_ttl) + cache.set(CACHE_KEY_SOURCE_STATUS, data, timeout=cache_ttl) return JsonResponse(data) diff --git a/static/js/dashboard.js b/static/js/dashboard.js new file mode 100644 index 0000000..cd5c444 --- /dev/null +++ b/static/js/dashboard.js @@ -0,0 +1,309 @@ +/** + * Dashboard logic: stats rendering, audit selector, CPU chart, migration table. + * Expects globals: SKELETON_MODE, CURRENT_CLUSTER, auditData (set by index.html). + * Depends on: utils.js (formatBytes, getCSSVar, calculateStats) + */ +(function() { + var cpuDistributionChart = null; + + document.getElementById('auditSelector').addEventListener('change', function(e) { + var option = this.options[this.selectedIndex]; + if (!option) return; + document.getElementById('previewCpu').textContent = option.dataset.cpu || '1.0'; + document.getElementById('previewRam').textContent = option.dataset.ram || '1.0'; + document.getElementById('previewScope').textContent = option.dataset.scope || 'Full Cluster'; + document.getElementById('previewStrategy').textContent = option.dataset.strategy || 'Balanced'; + }); + + function setStat(key, text) { + document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) { + el.textContent = text; + el.classList.remove('animate-pulse'); + }); + } + function setProgress(key, value) { + document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) { + if (el.tagName === 'PROGRESS') { + el.value = value; + el.classList.remove('animate-pulse'); + } + }); + } + + function renderStats(data) { + if (!data) return; + var el = function(k) { return document.querySelector('[data-stats="' + k + '"]'); }; + var regionBadge = document.getElementById('regionBadge'); + if (regionBadge) regionBadge.textContent = data.region && data.region.name ? data.region.name : '—'; + setStat('pcpu.usage', Number((data.pcpu && data.pcpu.usage) || 0).toFixed(1)); + setStat('pcpu.total', String((data.pcpu && data.pcpu.total) || 0)); + setStat('pcpu.used_percentage', Number((data.pcpu && data.pcpu.used_percentage) || 0).toFixed(1) + '%'); + setStat('pcpu.usage_val', Number((data.pcpu && data.pcpu.usage) || 0).toFixed(1) + ' CPU'); + setProgress('pcpu.progress', (data.pcpu && data.pcpu.used_percentage) || 0); + setStat('pcpu.free', String((data.pcpu && data.pcpu.free) || 0)); + var pramUsageGb = formatBytes(data.pram && data.pram.usage, 'GB'); + var pramTotalGb = formatBytes(data.pram && data.pram.total, 'GB'); + var pramFreeGb = formatBytes(data.pram && data.pram.free, 'GB'); + setStat('pram.usage_gb', pramUsageGb); + setStat('pram.total_gb', pramTotalGb); + setStat('pram.used_percentage', Number((data.pram && data.pram.used_percentage) || 0).toFixed(1) + '%'); + setStat('pram.usage_gb_val', pramUsageGb + ' GB'); + setProgress('pram.progress', (data.pram && data.pram.used_percentage) || 0); + setStat('pram.free_gb', pramFreeGb + ' GB'); + setStat('vm.active', String(data.vm && data.vm.active)); + setStat('vm.stopped', String(data.vm && data.vm.stopped)); + setStat('vm.count', String(data.vm && data.vm.count)); + setStat('flavors.first_name', data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.name : '—'); + setStat('vm.avg_cpu', Number((data.vm && data.vm.avg_cpu) || 0).toFixed(1)); + setStat('vm.density', Number((data.vm && data.vm.density) || 0).toFixed(1) + '/host'); + setStat('vcpu.allocated_total', ((data.vcpu && data.vcpu.allocated) || 0) + ' / ' + ((data.vcpu && data.vcpu.total) || 0) + ' vCPU'); + setProgress('vcpu.progress', (data.vcpu && data.vcpu.allocated_percentage) || 0); + setStat('vcpu.allocated_percentage', Number((data.vcpu && data.vcpu.allocated_percentage) || 0).toFixed(1) + '%'); + var vcpuOver = el('vcpu.overcommit'); + if (vcpuOver) { + vcpuOver.textContent = 'overcommit: ' + Number((data.vcpu && data.vcpu.overcommit_ratio) || 0).toFixed(1) + ' / ' + Number((data.vcpu && data.vcpu.overcommit_max) || 0).toFixed(1) + ' — ' + Number((data.vcpu && data.vcpu.allocated_percentage) || 0).toFixed(1) + '% allocated'; + vcpuOver.classList.remove('animate-pulse'); + } + var vramAllocGb = formatBytes(data.vram && data.vram.allocated, 'GB'); + var vramTotalGb = formatBytes(data.vram && data.vram.total, 'GB'); + setStat('vram.allocated_total', vramAllocGb + ' / ' + vramTotalGb + ' GB'); + setProgress('vram.progress', (data.vram && data.vram.allocated_percentage) || 0); + setStat('vram.allocated_percentage', Number((data.vram && data.vram.allocated_percentage) || 0).toFixed(1) + '%'); + var vramOver = el('vram.overcommit'); + if (vramOver) { + vramOver.textContent = 'overcommit: ' + Number((data.vram && data.vram.overcommit_ratio) || 0).toFixed(1) + ' / ' + Number((data.vram && data.vram.overcommit_max) || 0).toFixed(1) + ' — ' + Number((data.vram && data.vram.allocated_percentage) || 0).toFixed(1) + '% allocated'; + vramOver.classList.remove('animate-pulse'); + } + setStat('flavors.first_count', (data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.count : 0) + ' instances'); + var vmCount = data.vm && data.vm.count ? data.vm.count : 0; + var firstCount = data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.count : 0; + setStat('flavors.first_share', (vmCount ? Math.round(firstCount / vmCount * 100) : 0) + '%'); + setStat('flavors.second_name', data.flavors && data.flavors.second_common_flavor ? data.flavors.second_common_flavor.name : '—'); + setStat('flavors.second_count', data.flavors && data.flavors.second_common_flavor ? String(data.flavors.second_common_flavor.count) : '—'); + setStat('flavors.third_name', data.flavors && data.flavors.third_common_flavor ? data.flavors.third_common_flavor.name : '—'); + setStat('flavors.third_count', data.flavors && data.flavors.third_common_flavor ? String(data.flavors.third_common_flavor.count) : '—'); + document.querySelectorAll('[data-stats]').forEach(function(n) { n.classList.remove('animate-pulse'); }); + } + + function renderAudits(auditsList) { + if (!auditsList || !auditsList.length) { + var countEl = document.getElementById('auditsCount'); + if (countEl) countEl.textContent = '0 available'; + var sel = document.getElementById('auditSelector'); + if (sel) { sel.disabled = false; sel.innerHTML = ''; } + return; + } + window.auditData = {}; + auditsList.forEach(function(a) { + window.auditData[a.id] = { + name: a.name, + migrations: typeof a.migrations === 'string' ? JSON.parse(a.migrations) : a.migrations, + hostData: { + labels: typeof a.host_labels === 'string' ? JSON.parse(a.host_labels) : a.host_labels, + current: typeof a.cpu_current === 'string' ? JSON.parse(a.cpu_current) : a.cpu_current, + projected: typeof a.cpu_projected === 'string' ? JSON.parse(a.cpu_projected) : a.cpu_projected + } + }; + }); + var sel = document.getElementById('auditSelector'); + if (sel) { + sel.disabled = false; + sel.innerHTML = ''; + auditsList.forEach(function(audit) { + var opt = document.createElement('option'); + opt.value = audit.id; + opt.setAttribute('data-cpu', audit.cpu_weight || '1.0'); + opt.setAttribute('data-ram', audit.ram_weight || '1.0'); + opt.setAttribute('data-scope', audit.scope || 'Full Cluster'); + opt.setAttribute('data-strategy', audit.strategy || 'Balanced'); + opt.setAttribute('data-goal', audit.goal || ''); + var dateStr = audit.created_at ? new Date(audit.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : ''; + opt.textContent = audit.name + ' (' + dateStr + ')'; + sel.appendChild(opt); + }); + } + var countEl = document.getElementById('auditsCount'); + if (countEl) countEl.textContent = auditsList.length + ' available'; + if (auditsList.length > 0) { + document.getElementById('auditSelector').dispatchEvent(new Event('change')); + loadSelectedAudit(); + } + } + + window.loadSelectedAudit = function() { + var auditId = document.getElementById('auditSelector').value; + updateMigrationTable(auditId); + updateCPUCharts(auditId); + }; + + function updateMigrationTable(auditId) { + var tbody = document.getElementById('migrationTableBody'); + var migrationCount = document.getElementById('migrationCount'); + var data = window.auditData && window.auditData[auditId]; + + if (!data || !data.migrations || data.migrations.length === 0) { + tbody.innerHTML = 'No migration actions recommended'; + migrationCount.textContent = '0 actions'; + return; + } + + var html = ''; + data.migrations.forEach(function(migration) { + var impact = migration.impact || 'Low'; + var impactClass = { 'Low': 'badge-success', 'Medium': 'badge-warning', 'High': 'badge-error' }[impact] || 'badge-neutral'; + html += '
' + migration.instanceName + '
' + migration.source + '' + migration.destination + '
' + migration.flavor + '' + impact + ''; + }); + tbody.innerHTML = html; + migrationCount.textContent = data.migrations.length + ' action' + (data.migrations.length !== 1 ? 's' : ''); + } + + function updateCPUCharts(auditId) { + var data = window.auditData && window.auditData[auditId]; + if (!data || !data.hostData) return; + + var ctx = document.getElementById('cpuDistributionChart').getContext('2d'); + var currentStats = calculateStats(data.hostData.current); + + document.getElementById('currentCpuMean').textContent = currentStats.mean.toFixed(1); + document.getElementById('currentCpuStd').textContent = (currentStats.std * 0.5).toFixed(1); + + if (cpuDistributionChart) cpuDistributionChart.destroy(); + + var colors = { + primary: getCSSVar('--color-primary'), + secondary: getCSSVar('--color-secondary'), + accent: getCSSVar('--color-accent'), + neutral: getCSSVar('--color-neutral'), + info: getCSSVar('--color-info'), + success: getCSSVar('--color-success'), + warning: getCSSVar('--color-warning'), + error: getCSSVar('--color-error') + }; + var textColor = getCSSVar('--color-base-content'); + var gridColor = getCSSVar('--chart-grid-color') || textColor; + + cpuDistributionChart = new Chart(ctx, { + type: 'bar', + data: { + labels: data.hostData.labels, + datasets: [ + { label: 'Current', data: data.hostData.current.slice(), backgroundColor: colors.info + '40', borderColor: colors.info, borderWidth: 1, borderRadius: 3 }, + { label: 'Projected', data: data.hostData.projected.slice(), backgroundColor: colors.warning + '40', borderColor: colors.warning, borderWidth: 1, borderRadius: 3 } + ] + }, + options: { + responsive: true, + maintainAspectRatio: false, + animation: { + onComplete: function() { + var chart = this.chart || this; + if (chart._hidingDataset === undefined) return; + var i = chart._hidingDataset; + chart.getDatasetMeta(i).hidden = true; + chart.data.datasets[i].data = chart._cpuOriginalData[i].slice(); + delete chart._hidingDataset; + chart.update('none'); + } + }, + plugins: { + legend: { + display: true, + position: 'top', + align: 'center', + onClick: function(e, legendItem, legend) { + var i = legendItem.datasetIndex; + var chart = legend.chart; + var len = chart.data.labels.length; + if (chart.isDatasetVisible(i)) { + chart._hidingDataset = i; + chart.data.datasets[i].data = Array(len).fill(0); + chart.update(); + } else { + chart.data.datasets[i].data = Array(len).fill(0); + chart.show(i); + chart.update('none'); + chart.data.datasets[i].data = chart._cpuOriginalData[i].slice(); + chart.update(); + } + }, + labels: { + usePointStyle: true, + pointStyle: 'rect', + boxWidth: 14, + boxHeight: 14, + padding: 12, + color: textColor, + generateLabels: function(chart) { + var datasets = chart.data.datasets; + var labelColor = getCSSVar('--color-base-content') || textColor; + return datasets.map(function(ds, i) { + return { text: ds.label, fillStyle: ds.borderColor, strokeStyle: ds.borderColor, lineWidth: 1, fontColor: labelColor, color: labelColor, hidden: !chart.isDatasetVisible(i), datasetIndex: i }; + }); + } + } + }, + tooltip: { + callbacks: { label: function(ctx) { return ctx.dataset.label + ': ' + Number(ctx.parsed.y).toFixed(2) + '% CPU'; } } + }, + annotation: { + annotations: { + MeanLine: { type: 'line', yMin: currentStats.mean, yMax: currentStats.mean, borderColor: colors.success, borderWidth: 2, borderDash: [] }, + upperStdLine: { type: 'line', yMin: currentStats.mean + currentStats.std * 0.5, yMax: currentStats.mean + currentStats.std * 0.5, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] }, + lowerStdLine: { type: 'line', yMin: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, yMax: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] } + } + } + }, + scales: { + y: { beginAtZero: true, max: 100, grid: { drawBorder: false, color: gridColor }, ticks: { color: textColor, callback: function(value) { return value + '%'; } } }, + x: { grid: { display: false }, ticks: { display: false }, barPercentage: 1, categoryPercentage: 0.85 } + } + } + }); + cpuDistributionChart._cpuOriginalData = [ data.hostData.current.slice(), data.hostData.projected.slice() ]; + } + + document.addEventListener('DOMContentLoaded', function() { + if (typeof SKELETON_MODE !== 'undefined' && SKELETON_MODE) { + Promise.all([ + fetch('/api/stats/').then(function(r) { return r.ok ? r.json() : Promise.reject(r); }), + fetch('/api/audits/').then(function(r) { return r.ok ? r.json() : Promise.reject(r); }) + ]).then(function(results) { + renderStats(results[0]); + renderAudits(results[1].audits); + if (!results[1].audits || results[1].audits.length === 0) { + var cc = results[1].current_cluster; + if (cc && cc.host_labels && cc.cpu_current && cc.host_labels.length) { + window.auditData = window.auditData || {}; + window.auditData.current = { hostData: { labels: cc.host_labels, current: cc.cpu_current, projected: cc.cpu_current } }; + updateCPUCharts('current'); + } + } + }).catch(function(err) { + var msg = err.status ? 'Failed to load data (' + err.status + ')' : 'Failed to load data'; + var countEl = document.getElementById('auditsCount'); + if (countEl) countEl.textContent = msg; + fetch('/api/stats/').then(function(r) { return r.ok ? r.json() : null; }).then(function(d) { if (d) renderStats(d); }); + fetch('/api/audits/').then(function(r) { return r.ok ? r.json() : null; }).then(function(d) { if (d && d.audits) renderAudits(d.audits); }); + }); + } else { + var initialAudit = typeof INITIAL_AUDIT_ID !== 'undefined' ? INITIAL_AUDIT_ID : ''; + if (initialAudit && window.auditData && window.auditData[initialAudit]) { + document.getElementById('auditSelector').dispatchEvent(new Event('change')); + loadSelectedAudit(); + } else if (!initialAudit && typeof CURRENT_CLUSTER !== 'undefined' && CURRENT_CLUSTER && CURRENT_CLUSTER.host_labels && CURRENT_CLUSTER.host_labels.length) { + window.auditData = window.auditData || {}; + window.auditData.current = { hostData: { labels: CURRENT_CLUSTER.host_labels, current: CURRENT_CLUSTER.cpu_current, projected: CURRENT_CLUSTER.cpu_current } }; + updateCPUCharts('current'); + } + } + }); + + document.addEventListener('themechange', function() { + if (cpuDistributionChart) { + var auditId = document.getElementById('auditSelector').value; + cpuDistributionChart.destroy(); + cpuDistributionChart = null; + if (auditId) updateCPUCharts(auditId); + } + }); +})(); diff --git a/templates/dashboard/_allocation_flavors.html b/templates/dashboard/_allocation_flavors.html new file mode 100644 index 0000000..efb177d --- /dev/null +++ b/templates/dashboard/_allocation_flavors.html @@ -0,0 +1,151 @@ +{% load mathfilters %} + +
+ +
+
+

+ + + + Resource Allocation +

+ {% if skeleton %} +
+
+ CPU Allocation + — / — vCPU +
+
+ + —% +
+
—
+
+
+
+ RAM Allocation + — / — GB +
+
+ + —% +
+
—
+
+ {% else %} + +
+
+ CPU Allocation + {{ vcpu.allocated }} / {{ vcpu.total }} vCPU +
+
+ + {{ vcpu.allocated_percentage|floatformat:1 }}% +
+
+ overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }} + {{ vcpu.allocated_percentage|floatformat:1 }}% allocated +
+
+ + +
+
+ RAM Allocation + {{ vram.allocated|convert_bytes }} / {{ vram.total|convert_bytes }} GB +
+
+ + {{ vram.allocated_percentage|floatformat:1 }}% +
+
+ overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }} + {{ vram.allocated_percentage|floatformat:1 }}% allocated +
+
+ {% endif %} +
+
+ + +
+
+

+ + + + + Top Flavors +

+ {% if skeleton %} +
+
+
+ — + — instances +
+
+ Share + —% +
+
+
+
+
+
+ — +
+ — +
+
+
+
+ — +
+ — +
+
+
+ {% else %} +
+ +
+
+ {{ flavors.first_common_flavor.name }} + {{ flavors.first_common_flavor.count }} instances +
+
+ Share + {{ flavors.first_common_flavor.count|div:vm.count|mul:100|floatformat:0 }}% +
+
+ + +
+ {% if flavors.second_common_flavor %} +
+
+
+ {{ flavors.second_common_flavor.name }} +
+ {{ flavors.second_common_flavor.count }} +
+ {% endif %} + + {% if flavors.third_common_flavor %} +
+
+
+ {{ flavors.third_common_flavor.name }} +
+ {{ flavors.third_common_flavor.count }} +
+ {% endif %} +
+
+ {% endif %} +
+
+
diff --git a/templates/dashboard/_audit_section.html b/templates/dashboard/_audit_section.html new file mode 100644 index 0000000..37a7654 --- /dev/null +++ b/templates/dashboard/_audit_section.html @@ -0,0 +1,71 @@ + +
+
+
+
+
+

Audit Analysis

+
Select an audit to analyze resource distribution
+
+
+ {% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %} +
+ +
+
+
+
+ Strategy: + Balanced +
+
+ Scope: + Full Cluster +
+
+ CPU Weight: + 1.0 +
+
+ RAM Weight: + 1.0 +
+
+
+
+
+
+
+ +
+ + +
+
+
+
diff --git a/templates/dashboard/_chart_migrations.html b/templates/dashboard/_chart_migrations.html new file mode 100644 index 0000000..5af42aa --- /dev/null +++ b/templates/dashboard/_chart_migrations.html @@ -0,0 +1,53 @@ + +
+
+
+

CPU Distribution (Current vs Projected)

+
+ +
+
+
+
+ Mean: 0% +
+
+
+ ±0.5σ: 0% +
+
+
+
+
+ + +
+
+
+
+

Migration Actions

+
Select audit
+
+ +
+ + + + + + + + + + + + + + +
InstanceSource → DestinationFlavorImpact
+ No audit selected. Load an audit to view migration recommendations. +
+
+
+
+
diff --git a/templates/dashboard/_stats_cards.html b/templates/dashboard/_stats_cards.html new file mode 100644 index 0000000..5f935fa --- /dev/null +++ b/templates/dashboard/_stats_cards.html @@ -0,0 +1,162 @@ +{% load mathfilters %} + +
+ +
+
+ {% if skeleton %} +
+
+

CPU Utilization

+
— / — CPU
+
+
—%
+
+
+
+ Used + — +
+ +
+ Free + — +
+
+ {% else %} +
+
+

CPU Utilization

+
{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU
+
+
{{ pcpu.used_percentage|floatformat:1 }}%
+
+
+
+ Used + {{ pcpu.usage|floatformat:1 }} CPU +
+ +
+ Free + {{ pcpu.free }} CPU +
+
+ {% endif %} +
+
+ + +
+
+ {% if skeleton %} +
+
+

RAM Utilization

+
— / — GB
+
+
—%
+
+
+
+ Used + — +
+ +
+ Free + — +
+
+ {% else %} +
+
+

RAM Utilization

+
{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB
+
+
{{ pram.used_percentage|floatformat:1 }}%
+
+
+
+ Used + {{ pram.usage|convert_bytes }} GB +
+ +
+ Free + {{ pram.free|convert_bytes }} GB +
+
+ {% endif %} +
+
+ + +
+
+ {% if skeleton %} +
+
+

Instances

+
— active / — stopped
+
+
—
+
+
+
+
+
+ Most Used Flavor +
+ — +
+
+
+
+ Avg. vCPU/VM +
+ — +
+
+
+
+ Density +
+ — +
+
+ {% else %} +
+
+

Instances

+
{{ vm.active }} active / {{ vm.stopped }} stopped
+
+
{{ vm.count }}
+
+
+
+
+
+ Most Used Flavor +
+ {{ flavors.first_common_flavor.name }} +
+
+
+
+ Avg. vCPU/VM +
+ {{ vm.avg_cpu|floatformat:1 }} +
+
+
+
+ Density +
+ {{ vm.density|floatformat:1 }}/host +
+
+ {% endif %} +
+
+
diff --git a/templates/index.html b/templates/index.html index 3b68434..d61a959 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,444 +11,10 @@ {% block content %}
- -
- -
-
- {% if skeleton %} -
-
-

CPU Utilization

-
— / — CPU
-
-
—%
-
-
-
- Used - — -
- -
- Free - — -
-
- {% else %} -
-
-

CPU Utilization

-
{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU
-
-
{{ pcpu.used_percentage|floatformat:1 }}%
-
-
-
- Used - {{ pcpu.usage|floatformat:1 }} CPU -
- -
- Free - {{ pcpu.free }} CPU -
-
- {% endif %} -
-
- - -
-
- {% if skeleton %} -
-
-

RAM Utilization

-
— / — GB
-
-
—%
-
-
-
- Used - — -
- -
- Free - — -
-
- {% else %} -
-
-

RAM Utilization

-
{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB
-
-
{{ pram.used_percentage|floatformat:1 }}%
-
-
-
- Used - {{ pram.usage|convert_bytes }} GB -
- -
- Free - {{ pram.free|convert_bytes }} GB -
-
- {% endif %} -
-
- - -
-
- {% if skeleton %} -
-
-

Instances

-
— active / — stopped
-
-
—
-
-
-
-
-
- Most Used Flavor -
- — -
-
-
-
- Avg. vCPU/VM -
- — -
-
-
-
- Density -
- — -
-
- {% else %} -
-
-

Instances

-
{{ vm.active }} active / {{ vm.stopped }} stopped
-
-
{{ vm.count }}
-
-
-
-
-
- Most Used Flavor -
- {{ flavors.first_common_flavor.name }} -
-
-
-
- Avg. vCPU/VM -
- {{ vm.avg_cpu|floatformat:1 }} -
-
-
-
- Density -
- {{ vm.density|floatformat:1 }}/host -
-
- {% endif %} -
-
-
- - -
- -
-
-

- - - - Resource Allocation -

- {% if skeleton %} -
-
- CPU Allocation - — / — vCPU -
-
- - —% -
-
—
-
-
-
- RAM Allocation - — / — GB -
-
- - —% -
-
—
-
- {% else %} - -
-
- CPU Allocation - {{ vcpu.allocated }} / {{ vcpu.total }} vCPU -
-
- - {{ vcpu.allocated_percentage|floatformat:1 }}% -
-
- overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }} - {{ vcpu.allocated_percentage|floatformat:1 }}% allocated -
-
- - -
-
- RAM Allocation - {{ vram.allocated|convert_bytes }} / {{ vram.total|convert_bytes }} GB -
-
- - {{ vram.allocated_percentage|floatformat:1 }}% -
-
- overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }} - {{ vram.allocated_percentage|floatformat:1 }}% allocated -
-
- {% endif %} -
-
- - -
-
-

- - - - - Top Flavors -

- {% if skeleton %} -
-
-
- — - — instances -
-
- Share - —% -
-
-
-
-
-
- — -
- — -
-
-
-
- — -
- — -
-
-
- {% else %} -
- -
-
- {{ flavors.first_common_flavor.name }} - {{ flavors.first_common_flavor.count }} instances -
-
- Share - {{ flavors.first_common_flavor.count|div:vm.count|mul:100|floatformat:0 }}% -
-
- - -
- {% if flavors.second_common_flavor %} -
-
-
- {{ flavors.second_common_flavor.name }} -
- {{ flavors.second_common_flavor.count }} -
- {% endif %} - - {% if flavors.third_common_flavor %} -
-
-
- {{ flavors.third_common_flavor.name }} -
- {{ flavors.third_common_flavor.count }} -
- {% endif %} -
-
- {% endif %} -
-
-
- - -
-
-
-
-
-

Audit Analysis

-
Select an audit to analyze resource distribution
-
-
- {% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %} -
- -
-
-
-
- Strategy: - Balanced -
-
- Scope: - Full Cluster -
-
- CPU Weight: - 1.0 -
-
- RAM Weight: - 1.0 -
-
-
-
-
-
-
- -
- - -
-
-
-
- - -
-
-
-

CPU Distribution (Current vs Projected)

-
- -
-
-
-
- Mean: 0% -
-
-
- ±0.5σ: 0% -
-
-
-
-
- - -
-
-
-
-

Migration Actions

-
Select audit
-
- -
- - - - - - - - - - - - - - -
InstanceSource → DestinationFlavorImpact
- No audit selected. Load an audit to view migration recommendations. -
-
-
-
-
+ {% include "dashboard/_stats_cards.html" %} + {% include "dashboard/_allocation_flavors.html" %} + {% include "dashboard/_audit_section.html" %} + {% include "dashboard/_chart_migrations.html" %}
{% endblock %} @@ -457,7 +23,7 @@ const SKELETON_MODE = {{ skeleton|yesno:"true,false" }}; const CURRENT_CLUSTER = {% if current_cluster %}{ "host_labels": {{ current_cluster.host_labels|safe }}, "cpu_current": {{ current_cluster.cpu_current|safe }} }{% else %}null{% endif %}; - let auditData = { + window.auditData = { {% if not skeleton %} {% for audit in audits %} "{{ audit.id }}": { @@ -472,430 +38,9 @@ {% endfor %} {% endif %} }; - - document.getElementById('auditSelector').addEventListener('change', function(e) { - const option = this.options[this.selectedIndex]; - if (!option) return; - document.getElementById('previewCpu').textContent = option.dataset.cpu || '1.0'; - document.getElementById('previewRam').textContent = option.dataset.ram || '1.0'; - document.getElementById('previewScope').textContent = option.dataset.scope || 'Full Cluster'; - document.getElementById('previewStrategy').textContent = option.dataset.strategy || 'Balanced'; - }); - - let cpuDistributionChart = null; - - function setStat(key, text) { - document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) { - el.textContent = text; - el.classList.remove('animate-pulse'); - }); - } - function setProgress(key, value) { - document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) { - if (el.tagName === 'PROGRESS') { - el.value = value; - el.classList.remove('animate-pulse'); - } - }); - } - - function renderStats(data) { - if (!data) return; - var el = function(k) { return document.querySelector('[data-stats="' + k + '"]'); }; - var regionBadge = document.getElementById('regionBadge'); - if (regionBadge) regionBadge.textContent = data.region && data.region.name ? data.region.name : '—'; - setStat('pcpu.usage', Number((data.pcpu && data.pcpu.usage) || 0).toFixed(1)); - setStat('pcpu.total', String((data.pcpu && data.pcpu.total) || 0)); - setStat('pcpu.used_percentage', Number((data.pcpu && data.pcpu.used_percentage) || 0).toFixed(1) + '%'); - setStat('pcpu.usage_val', Number((data.pcpu && data.pcpu.usage) || 0).toFixed(1) + ' CPU'); - setProgress('pcpu.progress', (data.pcpu && data.pcpu.used_percentage) || 0); - setStat('pcpu.free', String((data.pcpu && data.pcpu.free) || 0)); - var pramUsageGb = formatBytes(data.pram && data.pram.usage, 'GB'); - var pramTotalGb = formatBytes(data.pram && data.pram.total, 'GB'); - var pramFreeGb = formatBytes(data.pram && data.pram.free, 'GB'); - setStat('pram.usage_gb', pramUsageGb); - setStat('pram.total_gb', pramTotalGb); - setStat('pram.used_percentage', Number((data.pram && data.pram.used_percentage) || 0).toFixed(1) + '%'); - setStat('pram.usage_gb_val', pramUsageGb + ' GB'); - setProgress('pram.progress', (data.pram && data.pram.used_percentage) || 0); - setStat('pram.free_gb', pramFreeGb + ' GB'); - setStat('vm.active', String(data.vm && data.vm.active)); - setStat('vm.stopped', String(data.vm && data.vm.stopped)); - setStat('vm.count', String(data.vm && data.vm.count)); - setStat('flavors.first_name', data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.name : '—'); - setStat('vm.avg_cpu', Number((data.vm && data.vm.avg_cpu) || 0).toFixed(1)); - setStat('vm.density', Number((data.vm && data.vm.density) || 0).toFixed(1) + '/host'); - setStat('vcpu.allocated_total', ((data.vcpu && data.vcpu.allocated) || 0) + ' / ' + ((data.vcpu && data.vcpu.total) || 0) + ' vCPU'); - setProgress('vcpu.progress', (data.vcpu && data.vcpu.allocated_percentage) || 0); - setStat('vcpu.allocated_percentage', Number((data.vcpu && data.vcpu.allocated_percentage) || 0).toFixed(1) + '%'); - var vcpuOver = el('vcpu.overcommit'); - if (vcpuOver) { - vcpuOver.textContent = 'overcommit: ' + Number((data.vcpu && data.vcpu.overcommit_ratio) || 0).toFixed(1) + ' / ' + Number((data.vcpu && data.vcpu.overcommit_max) || 0).toFixed(1) + ' — ' + Number((data.vcpu && data.vcpu.allocated_percentage) || 0).toFixed(1) + '% allocated'; - vcpuOver.classList.remove('animate-pulse'); - } - var vramAllocGb = formatBytes(data.vram && data.vram.allocated, 'GB'); - var vramTotalGb = formatBytes(data.vram && data.vram.total, 'GB'); - setStat('vram.allocated_total', vramAllocGb + ' / ' + vramTotalGb + ' GB'); - setProgress('vram.progress', (data.vram && data.vram.allocated_percentage) || 0); - setStat('vram.allocated_percentage', Number((data.vram && data.vram.allocated_percentage) || 0).toFixed(1) + '%'); - var vramOver = el('vram.overcommit'); - if (vramOver) { - vramOver.textContent = 'overcommit: ' + Number((data.vram && data.vram.overcommit_ratio) || 0).toFixed(1) + ' / ' + Number((data.vram && data.vram.overcommit_max) || 0).toFixed(1) + ' — ' + Number((data.vram && data.vram.allocated_percentage) || 0).toFixed(1) + '% allocated'; - vramOver.classList.remove('animate-pulse'); - } - setStat('flavors.first_count', (data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.count : 0) + ' instances'); - var vmCount = data.vm && data.vm.count ? data.vm.count : 0; - var firstCount = data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.count : 0; - setStat('flavors.first_share', (vmCount ? Math.round(firstCount / vmCount * 100) : 0) + '%'); - setStat('flavors.second_name', data.flavors && data.flavors.second_common_flavor ? data.flavors.second_common_flavor.name : '—'); - setStat('flavors.second_count', data.flavors && data.flavors.second_common_flavor ? String(data.flavors.second_common_flavor.count) : '—'); - setStat('flavors.third_name', data.flavors && data.flavors.third_common_flavor ? data.flavors.third_common_flavor.name : '—'); - setStat('flavors.third_count', data.flavors && data.flavors.third_common_flavor ? String(data.flavors.third_common_flavor.count) : '—'); - document.querySelectorAll('[data-stats]').forEach(function(n) { n.classList.remove('animate-pulse'); }); - } - - function renderAudits(auditsList) { - if (!auditsList || !auditsList.length) { - var countEl = document.getElementById('auditsCount'); - if (countEl) countEl.textContent = '0 available'; - var sel = document.getElementById('auditSelector'); - if (sel) { sel.disabled = false; sel.innerHTML = ''; } - return; - } - auditData = {}; - auditsList.forEach(function(a) { - auditData[a.id] = { - name: a.name, - migrations: typeof a.migrations === 'string' ? JSON.parse(a.migrations) : a.migrations, - hostData: { - labels: typeof a.host_labels === 'string' ? JSON.parse(a.host_labels) : a.host_labels, - current: typeof a.cpu_current === 'string' ? JSON.parse(a.cpu_current) : a.cpu_current, - projected: typeof a.cpu_projected === 'string' ? JSON.parse(a.cpu_projected) : a.cpu_projected - } - }; - }); - var sel = document.getElementById('auditSelector'); - if (sel) { - sel.disabled = false; - sel.innerHTML = ''; - auditsList.forEach(function(audit) { - var opt = document.createElement('option'); - opt.value = audit.id; - opt.setAttribute('data-cpu', audit.cpu_weight || '1.0'); - opt.setAttribute('data-ram', audit.ram_weight || '1.0'); - opt.setAttribute('data-scope', audit.scope || 'Full Cluster'); - opt.setAttribute('data-strategy', audit.strategy || 'Balanced'); - opt.setAttribute('data-goal', audit.goal || ''); - var dateStr = audit.created_at ? new Date(audit.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : ''; - opt.textContent = audit.name + ' (' + dateStr + ')'; - sel.appendChild(opt); - }); - } - var countEl = document.getElementById('auditsCount'); - if (countEl) countEl.textContent = auditsList.length + ' available'; - if (auditsList.length > 0) { - document.getElementById('auditSelector').dispatchEvent(new Event('change')); - loadSelectedAudit(); - } - } - - // Load selected audit - function loadSelectedAudit() { - const auditId = document.getElementById('auditSelector').value; - updateMigrationTable(auditId); - updateCPUCharts(auditId); - } - - // Update migration table - function updateMigrationTable(auditId) { - const tbody = document.getElementById('migrationTableBody'); - const migrationCount = document.getElementById('migrationCount'); - const data = auditData[auditId]; - - if (!data || !data.migrations || data.migrations.length === 0) { - tbody.innerHTML = ` - - - No migration actions recommended - - - `; - migrationCount.textContent = '0 actions'; - return; - } - - let html = ''; - data.migrations.forEach(migration => { - const impact = migration.impact || 'Low'; - const impactClass = { - 'Low': 'badge-success', - 'Medium': 'badge-warning', - 'High': 'badge-error' - }[impact] || 'badge-neutral'; - - html += ` - - -
${migration.instanceName}
- - -
- ${migration.source} - - - - ${migration.destination} -
- - - ${migration.flavor} - - - ${impact} - - - `; - }); - - tbody.innerHTML = html; - migrationCount.textContent = `${data.migrations.length} action${data.migrations.length !== 1 ? 's' : ''}`; - } - - // Update CPU chart (combined current vs projected) - function updateCPUCharts(auditId) { - const data = auditData[auditId]; - if (!data || !data.hostData) return; - - const ctx = document.getElementById('cpuDistributionChart').getContext('2d'); - - const currentStats = calculateStats(data.hostData.current); - - document.getElementById('currentCpuMean').textContent = currentStats.mean.toFixed(1); - document.getElementById('currentCpuStd').textContent = (currentStats.std * 0.5).toFixed(1); - - if (cpuDistributionChart) cpuDistributionChart.destroy(); - - const colors = { - primary: getCSSVar('--color-primary'), - secondary: getCSSVar('--color-secondary'), - accent: getCSSVar('--color-accent'), - neutral: getCSSVar('--color-neutral'), - info: getCSSVar('--color-info'), - success: getCSSVar('--color-success'), - warning: getCSSVar('--color-warning'), - error: getCSSVar('--color-error') - }; - const textColor = getCSSVar('--color-base-content'); - const gridColor = getCSSVar('--chart-grid-color') || textColor; - - cpuDistributionChart = new Chart(ctx, { - type: 'bar', - data: { - labels: data.hostData.labels, - datasets: [ - { - label: 'Current', - data: data.hostData.current.slice(), - backgroundColor: colors.info + '40', - borderColor: colors.info, - borderWidth: 1, - borderRadius: 3 - }, - { - label: 'Projected', - data: data.hostData.projected.slice(), - backgroundColor: colors.warning + '40', - borderColor: colors.warning, - borderWidth: 1, - borderRadius: 3 - } - ] - }, - options: { - responsive: true, - maintainAspectRatio: false, - animation: { - onComplete: function() { - var chart = this; - if (typeof chart.getDatasetMeta !== 'function') chart = chart.chart; - if (!chart || chart._hidingDataset === undefined) return; - var i = chart._hidingDataset; - chart.getDatasetMeta(i).hidden = true; - chart.data.datasets[i].data = chart._cpuOriginalData[i].slice(); - delete chart._hidingDataset; - chart.update('none'); - } - }, - plugins: { - legend: { - display: true, - position: 'top', - align: 'center', - onClick: function(e, legendItem, legend) { - const i = legendItem.datasetIndex; - const chart = legend.chart; - const len = chart.data.labels.length; - if (chart.isDatasetVisible(i)) { - chart._hidingDataset = i; - chart.data.datasets[i].data = Array(len).fill(0); - chart.update(); - } else { - chart.data.datasets[i].data = Array(len).fill(0); - chart.show(i); - chart.update('none'); - chart.data.datasets[i].data = chart._cpuOriginalData[i].slice(); - chart.update(); - } - }, - labels: { - usePointStyle: true, - pointStyle: 'rect', - boxWidth: 14, - boxHeight: 14, - padding: 12, - color: textColor, - generateLabels: function(chart) { - const datasets = chart.data.datasets; - const labelColor = getCSSVar('--color-base-content'); - return datasets.map(function(ds, i) { - return { - text: ds.label, - fillStyle: ds.borderColor, - strokeStyle: ds.borderColor, - lineWidth: 1, - fontColor: labelColor, - color: labelColor, - hidden: !chart.isDatasetVisible(i), - datasetIndex: i - }; - }); - } - } - }, - tooltip: { - callbacks: { - label: (ctx) => `${ctx.dataset.label}: ${Number(ctx.parsed.y).toFixed(2)}% CPU` - } - }, - annotation: { - annotations: { - MeanLine: { - type: 'line', - yMin: currentStats.mean.toFixed(1), - yMax: currentStats.mean.toFixed(1), - borderColor: colors.success, - borderWidth: 2, - borderDash: [] - }, - upperStdLine: { - type: 'line', - yMin: (currentStats.mean + currentStats.std * 0.5).toFixed(1), - yMax: (currentStats.mean + currentStats.std * 0.5).toFixed(1), - borderColor: colors.error, - borderWidth: 1, - borderDash: [5, 5] - }, - lowerStdLine: { - type: 'line', - yMin: currentStats.mean > currentStats.std * 0.5 ? (currentStats.mean - currentStats.std * 0.5).toFixed(1) : 0, - yMax: currentStats.mean > currentStats.std * 0.5 ? (currentStats.mean - currentStats.std * 0.5).toFixed(1) : 0, - borderColor: colors.error, - borderWidth: 1, - borderDash: [5, 5] - } - } - } - }, - scales: { - y: { - beginAtZero: true, - max: 100, - grid: { drawBorder: false, color: gridColor }, - ticks: { - color: textColor, - callback: value => value + '%' - } - }, - x: { - grid: { display: false }, - ticks: { - display: false - }, - barPercentage: 1, - categoryPercentage: 0.85 - } - } - } - }); - cpuDistributionChart._cpuOriginalData = [ - data.hostData.current.slice(), - data.hostData.projected.slice() - ]; - } - - // Utility functions - function calculateStats(data) { - const mean = data.reduce((a, b) => a + b, 0) / data.length; - const variance = data.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / data.length; - const std = Math.sqrt(variance); - return { mean, std }; - } - - document.addEventListener('DOMContentLoaded', function() { - if (SKELETON_MODE) { - Promise.all([ - fetch('/api/stats/').then(function(r) { return r.ok ? r.json() : Promise.reject(r); }), - fetch('/api/audits/').then(function(r) { return r.ok ? r.json() : Promise.reject(r); }) - ]).then(function(results) { - renderStats(results[0]); - renderAudits(results[1].audits); - if (!results[1].audits || results[1].audits.length === 0) { - var cc = results[1].current_cluster; - if (cc && cc.host_labels && cc.cpu_current && cc.host_labels.length) { - auditData["current"] = { - hostData: { - labels: cc.host_labels, - current: cc.cpu_current, - projected: cc.cpu_current - } - }; - updateCPUCharts('current'); - } - } - }).catch(function(err) { - var msg = err.status ? 'Failed to load data (' + err.status + ')' : 'Failed to load data'; - var countEl = document.getElementById('auditsCount'); - if (countEl) countEl.textContent = msg; - fetch('/api/stats/').then(function(r) { return r.ok ? r.json() : null; }).then(function(d) { if (d) renderStats(d); }); - fetch('/api/audits/').then(function(r) { return r.ok ? r.json() : null; }).then(function(d) { if (d && d.audits) renderAudits(d.audits); }); - }); - } else { - var initialAudit = "{% if audits %}{{ audits.0.id }}{% endif %}"; - if (initialAudit && auditData[initialAudit]) { - document.getElementById('auditSelector').dispatchEvent(new Event('change')); - loadSelectedAudit(); - } else if (!initialAudit && CURRENT_CLUSTER && CURRENT_CLUSTER.host_labels && CURRENT_CLUSTER.host_labels.length) { - auditData["current"] = { - hostData: { - labels: CURRENT_CLUSTER.host_labels, - current: CURRENT_CLUSTER.cpu_current, - projected: CURRENT_CLUSTER.cpu_current - } - }; - updateCPUCharts('current'); - } - } - }); - - document.addEventListener('themechange', function() { - if (cpuDistributionChart) { - const auditId = document.getElementById('auditSelector').value; - cpuDistributionChart.destroy(); - cpuDistributionChart = null; - if (auditId) updateCPUCharts(auditId); - } - }); + var INITIAL_AUDIT_ID = "{% if audits %}{{ audits.0.id }}{% endif %}"; + {% endblock %} {% block css %} @@ -910,4 +55,4 @@ @apply px-1.5 py-0.5 text-xs; } -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/watcher_visio/settings.py b/watcher_visio/settings.py index f3c6de1..c5dd08b 100644 --- a/watcher_visio/settings.py +++ b/watcher_visio/settings.py @@ -48,7 +48,7 @@ INSTALLED_APPS = [ PROMETHEUS_URL = "http://10.226.74.53:9090/" PROMETHEUS_METRICS = { "cpu_usage": "rate(libvirt_domain_info_cpu_time_seconds_total)[300s]", - "ram_usage": "avg_over_time(libvirt_domain_info_memory_usage_bytes[300s]", + "ram_usage": "avg_over_time(libvirt_domain_info_memory_usage_bytes[300s])", } # Openstack cloud settings