From 5a8f9aea09bc577abd294eecf591c47fdaeca4e3 Mon Sep 17 00:00:00 2001 From: "courtmanr@gmail.com" Date: Thu, 5 Jun 2025 12:32:57 +0100 Subject: [PATCH] feat: add Global Settings tab to Alert Management modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add new Global Settings tab with comprehensive alert configuration - Include global alert type toggles (CPU, Memory, Disk, Down alerts) - Add threshold configuration for CPU (85%), Memory (90%), Disk (95%) - Implement custom per-VM/LXC threshold integration placeholder - Add advanced settings for alert frequency and suppression - Create modern toggle switches and form controls - Load configuration from backend /api/config endpoint - Set up event handlers for all form controls - Prepare foundation for migrating from settings.js 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/public/js/ui/alertManagementModal.js | 268 +++++++++++++++++++++++ 1 file changed, 268 insertions(+) diff --git a/src/public/js/ui/alertManagementModal.js b/src/public/js/ui/alertManagementModal.js index 9394a0d2a..198f54c4a 100644 --- a/src/public/js/ui/alertManagementModal.js +++ b/src/public/js/ui/alertManagementModal.js @@ -55,6 +55,13 @@ PulseApp.ui.alertManagementModal = (() => { Alert Rules + + +
+

Loading custom thresholds...

+
+ + + +
+

Advanced Settings

+ +
+
+ + +

How often to check for alert conditions

+
+ +
+ + +

Prevent duplicate alerts for the same condition

+
+
+
+ + `; + } + function initializeAlertsTab() { // Set up refresh button const refreshBtn = document.getElementById('refresh-alerts-btn'); @@ -552,6 +709,58 @@ PulseApp.ui.alertManagementModal = (() => { }); } } + + function initializeGlobalSettingsTab() { + // Load current configuration + loadGlobalAlertConfig(); + + // Set up custom thresholds management + const manageCustomBtn = document.getElementById('manage-custom-thresholds-btn'); + if (manageCustomBtn) { + manageCustomBtn.addEventListener('click', () => { + // Integration with existing threshold modal from settings + if (PulseApp.ui.settings && PulseApp.ui.settings.showThresholdModal) { + PulseApp.ui.settings.showThresholdModal(); + } else { + alert('Custom threshold management will be available soon'); + } + }); + } + + // Set up alert type toggles + const alertToggles = document.querySelectorAll('input[name^="ALERT_"][name$="_ENABLED"]'); + alertToggles.forEach(toggle => { + toggle.addEventListener('change', (e) => { + console.log(`${e.target.name} toggled:`, e.target.checked); + }); + }); + + // Set up threshold inputs + const thresholdInputs = document.querySelectorAll('input[name$="_THRESHOLD"]'); + thresholdInputs.forEach(input => { + input.addEventListener('change', (e) => { + console.log(`${e.target.name} changed:`, e.target.value); + }); + }); + + // Set up advanced settings + const frequencySelect = document.querySelector('select[name="ALERT_FREQUENCY"]'); + if (frequencySelect) { + frequencySelect.addEventListener('change', (e) => { + console.log('Alert frequency changed:', e.target.value); + }); + } + + const suppressionSelect = document.querySelector('select[name="ALERT_SUPPRESSION"]'); + if (suppressionSelect) { + suppressionSelect.addEventListener('change', (e) => { + console.log('Alert suppression changed:', e.target.value); + }); + } + + // Load custom thresholds + loadCustomThresholds(); + } function switchNotificationSubTab(tabName) { // Update tab buttons @@ -1450,6 +1659,65 @@ ${isEditing ? 'Update Alert' : 'Create Alert'} } } + async function loadGlobalAlertConfig() { + try { + // Load configuration from the backend + const response = await fetch('/api/config'); + if (response.ok) { + const config = await response.json(); + PulseApp.config = config; // Update global config + + // Update the form values if they're loaded + updateGlobalSettingsForm(config); + } + } catch (error) { + console.error('Failed to load global alert configuration:', error); + } + } + + function updateGlobalSettingsForm(config) { + const alerts = config.alerts || {}; + + // Update alert type toggles + document.querySelector('input[name="ALERT_CPU_ENABLED"]').checked = alerts.cpu?.enabled !== false; + document.querySelector('input[name="ALERT_MEMORY_ENABLED"]').checked = alerts.memory?.enabled !== false; + document.querySelector('input[name="ALERT_DISK_ENABLED"]').checked = alerts.disk?.enabled !== false; + document.querySelector('input[name="ALERT_DOWN_ENABLED"]').checked = alerts.down?.enabled !== false; + + // Update threshold values + const cpuInput = document.querySelector('input[name="ALERT_CPU_THRESHOLD"]'); + if (cpuInput) cpuInput.value = alerts.cpu?.threshold || ''; + + const memoryInput = document.querySelector('input[name="ALERT_MEMORY_THRESHOLD"]'); + if (memoryInput) memoryInput.value = alerts.memory?.threshold || ''; + + const diskInput = document.querySelector('input[name="ALERT_DISK_THRESHOLD"]'); + if (diskInput) diskInput.value = alerts.disk?.threshold || ''; + } + + async function loadCustomThresholds() { + const customThresholdsList = document.getElementById('custom-thresholds-list'); + if (!customThresholdsList) return; + + try { + // For now, show placeholder content + // This would integrate with the existing custom threshold system + customThresholdsList.innerHTML = ` +
+

No custom thresholds configured

+

Click "Add Custom Threshold" to create VM/LXC-specific settings

+
+ `; + } catch (error) { + console.error('Failed to load custom thresholds:', error); + customThresholdsList.innerHTML = ` +
+

Failed to load custom thresholds

+
+ `; + } + } + // Global functions that need to be accessible from HTML onclick handlers window.toggleSystemAlert = function(alertId, enabled) { console.log(`Toggling system alert ${alertId} to ${enabled ? 'enabled' : 'disabled'}`);