botui/ui/suite/monitoring/monitoring.js

/* Monitoring module - shared/base JavaScript */

function setActiveNav(element) {
    document.querySelectorAll('.monitoring-nav .nav-item').forEach(item => {
        item.classList.remove('active');
    });
    element.classList.add('active');

    // Update page title
    const title = element.querySelector('span:not(.alert-badge):not(.health-indicator)').textContent;
    document.getElementById('page-title').textContent = title;
}

function updateTimeRange(range) {
    // Store selected time range
    localStorage.setItem('monitoring-time-range', range);

    // Trigger refresh of current view
    htmx.trigger('#monitoring-content', 'refresh');
}

function refreshMonitoring() {
    htmx.trigger('#monitoring-content', 'refresh');

    // Visual feedback
    const btn = event.currentTarget;
    btn.classList.add('active');
    setTimeout(() => btn.classList.remove('active'), 500);
}

let autoRefresh = true;
function toggleAutoRefresh() {
    autoRefresh = !autoRefresh;
    const btn = document.getElementById('auto-refresh-btn');
    btn.classList.toggle('active', autoRefresh);

    if (autoRefresh) {
        // Re-enable polling by refreshing the page content
        htmx.trigger('#monitoring-content', 'refresh');
    }
}

function exportData() {
    const timeRange = document.getElementById('time-range').value;
    window.open(`/api/monitoring/export?range=${timeRange}`, '_blank');
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Restore time range preference
    const savedRange = localStorage.getItem('monitoring-time-range');
    if (savedRange) {
        const timeRangeEl = document.getElementById('time-range');
        if (timeRangeEl) timeRangeEl.value = savedRange;
    }

    // Set auto-refresh button state
    const autoRefreshBtn = document.getElementById('auto-refresh-btn');
    if (autoRefreshBtn) autoRefreshBtn.classList.toggle('active', autoRefresh);
});

// Handle HTMX events for loading states
document.body.addEventListener('htmx:beforeRequest', function(evt) {
    if (evt.target.id === 'monitoring-content') {
        evt.target.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>Loading...</p></div>';
    }
});