75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
/* 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);
|
|
}
|
|
|
|
// Guard against duplicate declarations on HTMX reload
|
|
if (typeof window.monitoringModuleInitialized === "undefined") {
|
|
window.monitoringModuleInitialized = true;
|
|
var 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>';
|
|
}
|
|
});
|