Update dashboard metrics and enhance CPU statistics visualization

- Expanded mock data to include additional host labels and updated CPU current and projected values for better representation.
- Modified JavaScript to conditionally display projected CPU statistics and standard deviation, improving user experience.
- Refactored chart configuration to dynamically handle datasets based on the presence of projected data.
- Updated HTML to include a new block for displaying standard deviation, enhancing clarity in CPU metrics presentation.

dashboard/mock_data.py

@@ -21,9 +21,9 @@ def get_mock_context():
     vram_total = pram_total * vram_overcommit_max
 
     # Two sample audits with serialized fields for JS
-    host_labels = ["compute-0", "compute-1", "compute-2", "compute-3", "compute-4", "compute-5"]
+    host_labels = ["compute-0", "compute-1", "compute-2", "compute-3", "compute-4", "compute-5", "compute-6", "compute-7", "compute-8", "compute-9", "compute-10", "compute-11"]
-    cpu_current = [45.2, 38.1, 52.0, 41.3, 29.8, 48.5]
+    cpu_current = [45.2, 38.1, 52.0, 41.3, 29.8, 32.1, 36.4, 29.2, 42.2, 41.3, 28.3, 33.3]
-    cpu_projected = [42.0, 40.0, 48.0, 44.0, 35.0, 46.0]
+    cpu_projected = [42.0, 40.0, 48.0, 44.0, 35.0, 46.0, 43.0, 43.0, 44.0, 48.0, 47.0, 49.0]
 
     audits = [
         {

static/js/dashboard.js

@@ -161,11 +161,14 @@
         var data = window.auditData && window.auditData[auditId];
         if (!data || !data.hostData) return;
 
+        var hasProjected = (auditId !== 'current');
         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);
+        var stdBlock = document.getElementById('currentCpuStdBlock');
+        if (stdBlock) stdBlock.style.display = hasProjected ? '' : 'none';
 
         if (cpuDistributionChart) cpuDistributionChart.destroy();
 
@@ -182,14 +185,26 @@
         var textColor = getCSSVar('--color-base-content');
         var gridColor = getCSSVar('--chart-grid-color') || textColor;
 
+        var datasets = [
+            { label: 'Current', data: data.hostData.current.slice(), backgroundColor: colors.info + '40', borderColor: colors.info, borderWidth: 1, borderRadius: 3 }
+        ];
+        if (hasProjected) {
+            datasets.push({ label: 'Projected', data: data.hostData.projected.slice(), backgroundColor: colors.warning + '40', borderColor: colors.warning, borderWidth: 1, borderRadius: 3 });
+        }
+
+        var annotationConfig = {
+            MeanLine: { type: 'line', yMin: currentStats.mean, yMax: currentStats.mean, borderColor: colors.success, borderWidth: 2, borderDash: [] }
+        };
+        if (hasProjected) {
+            annotationConfig.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] };
+            annotationConfig.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] };
+        }
+
         cpuDistributionChart = new Chart(ctx, {
             type: 'bar',
             data: {
                 labels: data.hostData.labels,
-                datasets: [
+                datasets: 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,
@@ -246,11 +261,7 @@
                         callbacks: { label: function(ctx) { return ctx.dataset.label + ': ' + Number(ctx.parsed.y).toFixed(2) + '% CPU'; } }
                     },
                     annotation: {
-                        annotations: {
+                        annotations: annotationConfig
-                            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: {
@@ -259,7 +270,9 @@
                 }
             }
         });
-        cpuDistributionChart._cpuOriginalData = [ data.hostData.current.slice(), data.hostData.projected.slice() ];
+        cpuDistributionChart._cpuOriginalData = hasProjected
+            ? [ data.hostData.current.slice(), data.hostData.projected.slice() ]
+            : [ data.hostData.current.slice() ];
     }
 
     document.addEventListener('DOMContentLoaded', function() {

templates/dashboard/_chart_migrations.html

@@ -11,7 +11,7 @@
                     <div class="w-3 h-0.5 bg-success"></div>
                     <span class="text-success">Mean: <span id="currentCpuMean">0</span>%</span>
                 </div>
-                <div class="flex items-center gap-1 text-xs">
+                <div id="currentCpuStdBlock" class="flex items-center gap-1 text-xs">
                     <div class="w-3 h-0.5 bg-error/60"></div>
                     <span class="text-error/60">±0.5σ: <span id="currentCpuStd">0</span>%</span>
                 </div>