Enhance index.html and JavaScript for improved flavor statistics display

- Updated index.html to include additional flavor statistics with dynamic data binding for second and third common flavors.
- Refactored JavaScript functions to handle multiple elements for flavor statistics, ensuring accurate updates and removal of loading animations.
- Improved user experience by providing clearer visual representation of flavor data on the dashboard.

templates/index.html

@@ -266,8 +266,20 @@
                         </div>
                     </div>
                     <div class="space-y-2">
-                        <div class="flex justify-between items-center text-sm animate-pulse h-5 bg-base-200/50 rounded w-full max-w-[80%]"></div>
+                        <div class="flex justify-between items-center text-sm">
-                        <div class="flex justify-between items-center text-sm animate-pulse h-5 bg-base-200/50 rounded w-full max-w-[60%]"></div>
+                            <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 %}
@@ -473,12 +485,18 @@
     let cpuDistributionChart = null;
 
     function setStat(key, text) {
-        var el = document.querySelector('[data-stats="' + key + '"]');
+        document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) {
-        if (el) { el.textContent = text; el.classList.remove('animate-pulse'); }
+            el.textContent = text;
+            el.classList.remove('animate-pulse');
+        });
     }
     function setProgress(key, value) {
-        var el = document.querySelector('[data-stats="' + key + '"]');
+        document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) {
-        if (el && el.tagName === 'PROGRESS') { el.value = value; el.classList.remove('animate-pulse'); }
+            if (el.tagName === 'PROGRESS') {
+                el.value = value;
+                el.classList.remove('animate-pulse');
+            }
+        });
     }
 
     function renderStats(data) {
@@ -529,6 +547,10 @@
         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'); });
     }
 

watcher_visio/settings.py

@@ -69,6 +69,9 @@ MIDDLEWARE = [
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+# COOP ignored on non-HTTPS / non-localhost; disable to avoid console warning
+SECURE_CROSS_ORIGIN_OPENER_POLICY = None
+
 ROOT_URLCONF = 'watcher_visio.urls'
 
 TEMPLATES = [