diff options
| -rw-r--r-- | static/js/main.js | 222 |
1 files changed, 146 insertions, 76 deletions
diff --git a/static/js/main.js b/static/js/main.js index 5460247..b06bfee 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -118,20 +118,26 @@ function removeToken() { function showMetrics() { if (!metricsSection) { + console.error("Metrics section not found in DOM"); return; } - metricsSection.style.display = 'block'; - createOrShowHideButton(); - - // Display the service status when metrics are shown - updateServiceStatusDisplay(); - - // Initialize metrics UI if not already initialized - if (!chartsInitialized) { - initializeMetricsUI(); - } else { - startDataUpdates(); + try { + metricsSection.style.display = 'block'; + createOrShowHideButton(); + + // Display the service status when metrics are shown + updateServiceStatusDisplay(); + + // Initialize metrics UI if not already initialized + if (!chartsInitialized) { + initializeMetricsUI(); + } else { + startDataUpdates(); + } + } catch (error) { + console.error("Error showing metrics:", error); + alert("There was an error displaying the metrics. Please try refreshing the page."); } } @@ -374,12 +380,18 @@ function createMetricCard(container, metricName, definition) { // Add click event for chart expansion const chartContainer = metricCard.querySelector('.chart-container'); - if (chartContainer && typeof expandChart === 'function') { + if (chartContainer) { chartContainer.addEventListener('click', function() { - const metricAttr = this.getAttribute('data-metric'); - const labelAttr = this.getAttribute('data-label'); - if (metricAttr && labelAttr) { - expandChart(metricAttr, labelAttr); + try { + const metricAttr = this.getAttribute('data-metric'); + const labelAttr = this.getAttribute('data-label'); + if (metricAttr && labelAttr && typeof expandChart === 'function') { + expandChart(metricAttr, labelAttr); + } + } catch (error) { + console.error("Error expanding chart:", error); + // Fallback if there's an error - show a simple alert + alert(`Could not expand the ${displayName} chart. Please try again later.`); } }); } @@ -714,72 +726,51 @@ function initializeMetricsUI() { }); } -// --- Initialize everything when DOM is loaded --- -document.addEventListener('DOMContentLoaded', function() { - // Start server stats check - getServerStats(); - setInterval(getServerStats, 30000); - - // Apply styles to submit button - if (submitPasswordBtn) submitPasswordBtn.classList.add('submit-button'); - - // Set up password input event listener - if (passwordInput) { - passwordInput.addEventListener('keyup', function(event) { - if (event.key === 'Enter') { - submitPasswordBtn.click(); - } - }); - } +// Function to handle metrics visibility changes +function handleMetricsVisibilityChange() { + if (!metricsSection) return; - // Set up view metrics button - if (viewMetricsBtn) { - viewMetricsBtn.addEventListener('click', function() { - if (getToken()) { - showMetrics(); + try { + if (metricsSection.offsetParent !== null) { + // Metrics section is visible + if (!chartsInitialized) { + initializeMetricsUI(); } else { - openPasswordModal(); - } - }); - } - - // Set up password modal submit button - if (submitPasswordBtn) { - submitPasswordBtn.addEventListener('click', login); - } - - // Set up password modal close button - if (closeModalBtn) { - closeModalBtn.addEventListener('click', closePasswordModal); - } - - // Close password modal when clicking outside - if (passwordModal) { - passwordModal.addEventListener('click', function(event) { - if (event.target === passwordModal) { - closePasswordModal(); + startDataUpdates(); } - }); - } - - // Check if already authenticated and show metrics if so - if (getToken()) showMetrics(); - - // Observer for metrics section visibility - if (metricsSection) { - const observer = new MutationObserver(handleMetricsVisibilityChange); - observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] }); + } else { + // Metrics section is hidden + stopDataUpdates(); + } + } catch (error) { + console.error("Error handling metrics visibility change:", error); + // Don't show alert here since this might be called repeatedly + // Just log the error to console } -}); +} // Chart expansion functionality -const chartModal = document.getElementById('chart-modal'); -const chartModalTitle = document.getElementById('chart-modal-title'); -const closeChartModalBtn = document.querySelector('#chart-modal .close-button'); -const closeChartBtn = document.getElementById('close-chart-modal'); +let chartModal; +let chartModalTitle; +let closeChartModalBtn; +let closeChartBtn; let expandedChart = null; function expandChart(metricName, displayName) { + // Make sure the modal elements are initialized + if (!chartModal || !chartModalTitle) { + chartModal = document.getElementById('chart-modal'); + chartModalTitle = document.getElementById('chart-modal-title'); + closeChartModalBtn = document.querySelector('#chart-modal .close-button'); + closeChartBtn = document.getElementById('close-chart-modal'); + } + + // Safety check - if elements still not found, exit + if (!chartModal || !chartModalTitle) { + console.error("Chart modal elements not found"); + return; + } + // Set the modal title chartModalTitle.textContent = displayName; @@ -789,7 +780,16 @@ function expandChart(metricName, displayName) { // Create an expanded version of the chart const expandedChartCanvas = document.getElementById('expandedChart'); + if (!expandedChartCanvas) { + console.error("Expanded chart canvas not found"); + return; + } + const ctx = expandedChartCanvas.getContext('2d'); + if (!ctx) { + console.error("Could not get canvas context"); + return; + } // If there's already an expanded chart, destroy it first if (expandedChart) { @@ -798,7 +798,10 @@ function expandChart(metricName, displayName) { // Clone the options and data from the original chart const originalChart = charts[metricName]; - if (!originalChart) return; + if (!originalChart) { + console.error(`Chart for ${metricName} not found`); + return; + } const chartOptions = JSON.parse(JSON.stringify(originalChart.options)); // Adjust options for the expanded view @@ -825,13 +828,80 @@ function expandChart(metricName, displayName) { // Close modal events function closeChartModal() { + if (!chartModal) { + chartModal = document.getElementById('chart-modal'); + if (!chartModal) return; + } + chartModal.classList.remove('show'); setTimeout(() => chartModal.style.display = 'none', 300); } -// Initialize event listeners when DOM is loaded +// --- Initialize everything when DOM is loaded --- document.addEventListener('DOMContentLoaded', function() { - // Chart modal close buttons + // Initialize chart modal elements + chartModal = document.getElementById('chart-modal'); + chartModalTitle = document.getElementById('chart-modal-title'); + closeChartModalBtn = document.querySelector('#chart-modal .close-button'); + closeChartBtn = document.getElementById('close-chart-modal'); + + // Start server stats check + getServerStats(); + setInterval(getServerStats, 30000); + + // Apply styles to submit button + if (submitPasswordBtn) submitPasswordBtn.classList.add('submit-button'); + + // Set up password input event listener + if (passwordInput) { + passwordInput.addEventListener('keyup', function(event) { + if (event.key === 'Enter') { + submitPasswordBtn.click(); + } + }); + } + + // Set up view metrics button + if (viewMetricsBtn) { + viewMetricsBtn.addEventListener('click', function() { + if (getToken()) { + showMetrics(); + } else { + openPasswordModal(); + } + }); + } + + // Set up password modal submit button + if (submitPasswordBtn) { + submitPasswordBtn.addEventListener('click', login); + } + + // Set up password modal close button + const passwordCloseBtn = document.querySelector('#password-modal .close-button'); + if (passwordCloseBtn) { + passwordCloseBtn.addEventListener('click', closePasswordModal); + } + + // Close password modal when clicking outside + if (passwordModal) { + passwordModal.addEventListener('click', function(event) { + if (event.target === passwordModal) { + closePasswordModal(); + } + }); + } + + // Check if already authenticated and show metrics if so + if (getToken()) showMetrics(); + + // Observer for metrics section visibility + if (metricsSection) { + const observer = new MutationObserver(handleMetricsVisibilityChange); + observer.observe(metricsSection, { attributes: true, attributeFilter: ['style'] }); + } + + // Chart modal event listeners if (closeChartModalBtn) { closeChartModalBtn.addEventListener('click', closeChartModal); } |