@@ -1407,6 +1518,19 @@
// Refresh buttons
document.getElementById('refresh-workloads').addEventListener('click', loadRequestsLimits);
document.getElementById('refresh-historical').addEventListener('click', loadHistoricalAnalysis);
+
+ // Close dropdown when clicking outside
+ document.addEventListener('click', function(event) {
+ const dropdown = document.getElementById('timeRangeDropdown');
+ if (dropdown && !dropdown.contains(event.target)) {
+ const menu = document.getElementById('timeRangeMenu');
+ const toggle = document.getElementById('timeRangeToggle');
+ if (menu && toggle) {
+ menu.style.display = 'none';
+ toggle.setAttribute('aria-expanded', 'false');
+ }
+ }
+ });
}
function showSection(section) {
@@ -2172,8 +2296,17 @@
try {
showLoading('historical-workloads-container');
- // Get selected time range
- const timeRange = document.getElementById('timeRangeSelect')?.value || '24h';
+ // Get selected time range from PatternFly dropdown
+ const timeRangeText = document.getElementById('timeRangeText')?.textContent || 'Last 24 Hours';
+ let timeRange = '24h'; // default
+
+ switch(timeRangeText) {
+ case 'Last 1 Hour': timeRange = '1h'; break;
+ case 'Last 6 Hours': timeRange = '6h'; break;
+ case 'Last 24 Hours': timeRange = '24h'; break;
+ case 'Last 7 Days': timeRange = '7d'; break;
+ case 'Last 30 Days': timeRange = '30d'; break;
+ }
// Load historical data
const response = await fetch(`/api/v1/historical-analysis?time_range=${timeRange}`);
@@ -2192,6 +2325,50 @@
loadHistoricalAnalysis();
}
+ // Time range dropdown functions
+ function toggleTimeRangeDropdown() {
+ const menu = document.getElementById('timeRangeMenu');
+ const toggle = document.getElementById('timeRangeToggle');
+ const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+
+ menu.style.display = isExpanded ? 'none' : 'block';
+ toggle.setAttribute('aria-expanded', !isExpanded);
+ }
+
+ function selectTimeRange(value, text) {
+ // Update selected item
+ document.querySelectorAll('#timeRangeMenu .pf-m-selected').forEach(item => {
+ item.classList.remove('pf-m-selected');
+ });
+ event.target.classList.add('pf-m-selected');
+
+ // Update display text
+ document.getElementById('timeRangeText').textContent = text;
+
+ // Close dropdown
+ document.getElementById('timeRangeMenu').style.display = 'none';
+ document.getElementById('timeRangeToggle').setAttribute('aria-expanded', 'false');
+
+ // Load data with new time range
+ loadHistoricalAnalysisWithTimeRange(value);
+ }
+
+ async function loadHistoricalAnalysisWithTimeRange(timeRange) {
+ try {
+ showLoading('historical-workloads-container');
+
+ // Load historical data
+ const response = await fetch(`/api/v1/historical-analysis?time_range=${timeRange}`);
+ const data = await response.json();
+
+ updateHistoricalWorkloads(data);
+
+ } catch (error) {
+ console.error('Error loading historical analysis data:', error);
+ showError('historical-workloads-container', 'Failed to load historical data');
+ }
+ }
+
function updateMetricsCards(data) {
document.getElementById('total-workloads').textContent = data.total_pods || 0;
document.getElementById('total-namespaces').textContent = data.total_namespaces || 0;