From 05a54b785543a077af3c4e774ee75792cb8a34a8 Mon Sep 17 00:00:00 2001 From: andersonid Date: Thu, 2 Oct 2025 11:54:07 -0300 Subject: [PATCH] feat: implement accordion for historical analysis with real data - Add expandable rows in historical analysis table - Implement accordion functionality with chevron icons - Load real CPU and memory data from API endpoint - Display current, average, and peak usage with progress bars - Show recommendations based on historical data - Improve UX with inline details instead of separate cards --- app/static/index.html | 228 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 217 insertions(+), 11 deletions(-) diff --git a/app/static/index.html b/app/static/index.html index 9c5c52a..f64c56a 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -516,6 +516,33 @@ .section-hidden { display: none !important; } + + /* Accordion Styles */ + .expand-button { + background: none; + border: none; + color: var(--pf-global--Color--100); + cursor: pointer; + padding: 8px; + border-radius: 4px; + transition: all 0.2s ease; + } + + .expand-button:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + .workload-details-row { + background-color: #1A1A1A; + } + + .workload-details-container { + padding: 0; + } + + .workload-row:hover { + background-color: rgba(255, 255, 255, 0.02); + } @@ -910,6 +937,7 @@ + @@ -920,8 +948,13 @@ - ${data.workloads.map(workload => ` - + ${data.workloads.map((workload, index) => ` + + @@ -931,12 +964,22 @@ + + + `).join('')}
Workload Namespace Pods
+ + ${workload.name} ${workload.memory_usage || 'N/A'} ${workload.last_updated ? new Date(workload.last_updated).toLocaleString() : 'N/A'} -
@@ -970,6 +1013,169 @@ } } + function toggleWorkloadDetails(index) { + const detailsRow = document.getElementById(`details-${index}`); + const expandBtn = document.getElementById(`expand-btn-${index}`); + const icon = expandBtn.querySelector('i'); + + if (detailsRow.style.display === 'none') { + detailsRow.style.display = 'table-row'; + icon.classList.remove('fa-chevron-right'); + icon.classList.add('fa-chevron-down'); + } else { + detailsRow.style.display = 'none'; + icon.classList.remove('fa-chevron-down'); + icon.classList.add('fa-chevron-right'); + } + } + + async function loadWorkloadDetails(workloadName, namespace, index) { + const container = document.getElementById(`details-content-${index}`); + + try { + container.innerHTML = ` + + `; + + const response = await fetch(`/api/v1/historical-analysis/${namespace}/${workloadName}`); + const data = await response.json(); + + updateWorkloadDetailsAccordion(data, index); + + } catch (error) { + console.error('Error loading workload details:', error); + container.innerHTML = ` +
+ +

Error

+

Failed to load workload details

+
+ `; + } + } + + function updateWorkloadDetailsAccordion(data, index) { + const container = document.getElementById(`details-content-${index}`); + + // Parse CPU and Memory data + const cpuData = data.cpu_data || {}; + const memoryData = data.memory_data || {}; + const recommendations = data.recommendations || []; + + container.innerHTML = ` +
+
+
+
+

+ + CPU Usage +

+
+
+ ${cpuData.current ? ` +
+
+ Current Usage: + ${cpuData.current} cores +
+
+
+
+
+ ` : ''} + ${cpuData.average ? ` +
+
+ Average (24h): + ${cpuData.average} cores +
+
+ ` : ''} + ${cpuData.peak ? ` +
+
+ Peak (24h): + ${cpuData.peak} cores +
+
+ ` : ''} + ${!cpuData.current && !cpuData.average && !cpuData.peak ? ` +
+ +

CPU usage data not available

+
+ ` : ''} +
+
+ +
+
+

+ + Memory Usage +

+
+
+ ${memoryData.current ? ` +
+
+ Current Usage: + ${memoryData.current} +
+
+
+
+
+ ` : ''} + ${memoryData.average ? ` +
+
+ Average (24h): + ${memoryData.average} +
+
+ ` : ''} + ${memoryData.peak ? ` +
+
+ Peak (24h): + ${memoryData.peak} +
+
+ ` : ''} + ${!memoryData.current && !memoryData.average && !memoryData.peak ? ` +
+ +

Memory usage data not available

+
+ ` : ''} +
+
+
+ + ${recommendations.length > 0 ? ` +
+
+

+ + Recommendations +

+
+
+
    + ${recommendations.map(rec => `
  • ${rec}
    • `).join('')} +
+
+
+ ` : ''} +
+ `; + } + function updateWorkloadDetails(data) { const container = document.getElementById('workload-details-content'); @@ -982,21 +1188,21 @@

CPU usage data will be displayed here

-
- + +

Memory Usage

-
+

Memory usage data will be displayed here

-
+ `; - } - + } + function analyzeWorkload(namespace) { console.log('Analyzing workload:', namespace); // TODO: Implement workload analysis