diff --git a/src/public/js/ui/alertManagementModal.js b/src/public/js/ui/alertManagementModal.js index 96b418a90..bfb39d13e 100644 --- a/src/public/js/ui/alertManagementModal.js +++ b/src/public/js/ui/alertManagementModal.js @@ -256,97 +256,147 @@ PulseApp.ui.alertManagementModal = (() => {
- -
-

Global Alert Thresholds

-

These thresholds apply to all VMs and LXCs unless overridden by custom settings.

- - -
-
- CPU Alerts - -
-
- Memory Alerts - -
-
- Disk Alerts - -
-
- Down Alerts - -
-
- - -
-
- - -

Alert when CPU usage exceeds this percentage

-
-
- - -

Alert when memory usage exceeds this percentage

-
-
- - -

Alert when disk usage exceeds this percentage

-
-
- - -
- -
-
- -
-
-

Active System Alert Rules

-

Current monitoring rules based on the thresholds above

+
+
+

System Alert Rules

+ Built-in
- Built-in +

Global monitoring rules that apply to all VMs and LXCs unless overridden by custom settings.

- -

Loading system alerts...

+ +
+
+
+
+
+
+ + + +
+
+
+

CPU Alert

+

Triggers when CPU usage exceeds 85%

+
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+
+ + + +
+
+
+

Memory Alert

+

Triggers when memory usage exceeds 90%

+
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+
+ + + +
+
+
+

Disk Alert

+

Triggers when disk usage exceeds 95%

+
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+
+ + + +
+
+
+

Down Alert

+

Triggers when VM/LXC becomes unreachable or stops responding

+
+
+
+
+ + +
+
+
@@ -662,31 +712,19 @@ PulseApp.ui.alertManagementModal = (() => { addCustomBtn.addEventListener('click', openCustomAlertModal); } - // Set up save global thresholds button - const saveThresholdsBtn = document.getElementById('save-global-thresholds-btn'); - if (saveThresholdsBtn) { - saveThresholdsBtn.addEventListener('click', saveGlobalThresholds); - } - - // Set up global threshold toggles and inputs - const globalAlertToggles = document.querySelectorAll('input[name^="ALERT_"][name$="_ENABLED"]'); - globalAlertToggles.forEach(toggle => { + // Set up system alert toggles + const systemAlertToggles = document.querySelectorAll('#system-alerts-content input[type="checkbox"]'); + systemAlertToggles.forEach(toggle => { toggle.addEventListener('change', (e) => { - console.log(`${e.target.name} toggled:`, e.target.checked); - }); - }); - - const thresholdInputs = document.querySelectorAll('input[name$="_THRESHOLD"]'); - thresholdInputs.forEach(input => { - input.addEventListener('change', (e) => { - console.log(`${e.target.name} changed:`, e.target.value); + const alertType = e.target.id.replace('-alert-enabled', ''); + console.log(`System ${alertType} alert toggled:`, e.target.checked); + updateSystemAlertStatus(alertType, e.target.checked); }); }); // Load system and custom alerts loadSystemAlerts(); loadCustomAlerts(); - loadGlobalThresholds(); } function switchAlertRulesSubTab(tabName) { @@ -822,18 +860,8 @@ PulseApp.ui.alertManagementModal = (() => { } function loadSystemAlerts() { - const systemAlertsContent = document.getElementById('system-alerts-content'); - if (!systemAlertsContent) return; - - // Create system alert rules (CPU, Memory, Disk, Down) - const systemAlerts = [ - { id: 'cpu', name: 'CPU Usage', description: 'Alert when CPU usage exceeds threshold', enabled: true, threshold: 85 }, - { id: 'memory', name: 'Memory Usage', description: 'Alert when memory usage exceeds threshold', enabled: true, threshold: 90 }, - { id: 'disk', name: 'Disk Usage', description: 'Alert when disk usage exceeds threshold', enabled: true, threshold: 95 }, - { id: 'down', name: 'System Down', description: 'Alert when VM/LXC goes offline', enabled: true, threshold: null } - ]; - - systemAlertsContent.innerHTML = systemAlerts.map(alert => createSystemAlertCard(alert)).join(''); + // System alerts are now hardcoded in HTML, just load their configuration + loadSystemAlertConfiguration(); } async function loadCustomAlerts() { @@ -1158,58 +1186,111 @@ PulseApp.ui.alertManagementModal = (() => { alert('Email configuration saved successfully!'); } - function saveGlobalThresholds() { - // Collect global threshold configuration - const thresholdConfig = { - cpu: { - enabled: document.querySelector('input[name="ALERT_CPU_ENABLED"]')?.checked, - threshold: parseInt(document.querySelector('input[name="ALERT_CPU_THRESHOLD"]')?.value) || 85 - }, - memory: { - enabled: document.querySelector('input[name="ALERT_MEMORY_ENABLED"]')?.checked, - threshold: parseInt(document.querySelector('input[name="ALERT_MEMORY_THRESHOLD"]')?.value) || 90 - }, - disk: { - enabled: document.querySelector('input[name="ALERT_DISK_ENABLED"]')?.checked, - threshold: parseInt(document.querySelector('input[name="ALERT_DISK_THRESHOLD"]')?.value) || 95 - }, - down: { - enabled: document.querySelector('input[name="ALERT_DOWN_ENABLED"]')?.checked - } - }; + function editSystemAlert(alertType) { + // Create and show modal for editing system alert + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'; - // TODO: Implement saving to backend - console.log('Saving global thresholds:', thresholdConfig); - alert('Global alert thresholds saved successfully!'); + const config = PulseApp.config?.alerts?.[alertType] || {}; + const defaultThresholds = { cpu: 85, memory: 90, disk: 95 }; + const currentThreshold = config.threshold || defaultThresholds[alertType] || 85; + const isEnabled = config.enabled !== false; + + modal.innerHTML = ` +
+
+

Edit ${alertType.charAt(0).toUpperCase() + alertType.slice(1)} Alert

+
+
+
+ +
+ ${alertType !== 'down' ? ` +
+ + +

Alert when ${alertType} usage exceeds this percentage

+
+ ` : ''} +
+
+ + +
+
+ `; + + document.body.appendChild(modal); + window.currentSystemAlertModal = modal; + } + + function closeSystemAlertModal() { + if (window.currentSystemAlertModal) { + document.body.removeChild(window.currentSystemAlertModal); + window.currentSystemAlertModal = null; + } + } + + function saveSystemAlert(alertType) { + const enabled = document.getElementById('system-alert-enabled')?.checked; + const thresholdInput = document.getElementById('system-alert-threshold'); + const threshold = thresholdInput ? parseInt(thresholdInput.value) : null; + + const alertConfig = { enabled }; + if (threshold && alertType !== 'down') { + alertConfig.threshold = threshold; + } + + // TODO: Save to backend + console.log(`Saving ${alertType} alert:`, alertConfig); + + // Update the UI immediately + updateSystemAlertDisplay(alertType, alertConfig); + + alert(`${alertType.charAt(0).toUpperCase() + alertType.slice(1)} alert settings saved successfully!`); + closeSystemAlertModal(); + } + + function updateSystemAlertStatus(alertType, enabled) { + // TODO: Save status change to backend + console.log(`${alertType} alert ${enabled ? 'enabled' : 'disabled'}`); + } + + function updateSystemAlertDisplay(alertType, config) { + // Update the toggle + const toggle = document.getElementById(`${alertType}-alert-enabled`); + if (toggle) toggle.checked = config.enabled; + + // Update the threshold display + if (config.threshold && alertType !== 'down') { + const display = document.getElementById(`${alertType}-threshold-display`); + if (display) display.textContent = `${config.threshold}%`; + } } - function loadGlobalThresholds() { - // TODO: Load from backend and populate form - // For now, just set defaults + function loadSystemAlertConfiguration() { + // TODO: Load from backend and populate system alert displays const config = PulseApp.config?.alerts || {}; - // Update toggles - const cpuToggle = document.querySelector('input[name="ALERT_CPU_ENABLED"]'); - if (cpuToggle) cpuToggle.checked = config.cpu?.enabled !== false; - - const memoryToggle = document.querySelector('input[name="ALERT_MEMORY_ENABLED"]'); - if (memoryToggle) memoryToggle.checked = config.memory?.enabled !== false; - - const diskToggle = document.querySelector('input[name="ALERT_DISK_ENABLED"]'); - if (diskToggle) diskToggle.checked = config.disk?.enabled !== false; - - const downToggle = document.querySelector('input[name="ALERT_DOWN_ENABLED"]'); - if (downToggle) downToggle.checked = config.down?.enabled !== false; - - // Update threshold values - const cpuInput = document.querySelector('input[name="ALERT_CPU_THRESHOLD"]'); - if (cpuInput && config.cpu?.threshold) cpuInput.value = config.cpu.threshold; - - const memoryInput = document.querySelector('input[name="ALERT_MEMORY_THRESHOLD"]'); - if (memoryInput && config.memory?.threshold) memoryInput.value = config.memory.threshold; - - const diskInput = document.querySelector('input[name="ALERT_DISK_THRESHOLD"]'); - if (diskInput && config.disk?.threshold) diskInput.value = config.disk.threshold; + // Update system alert displays + ['cpu', 'memory', 'disk', 'down'].forEach(alertType => { + const alertConfig = config[alertType] || {}; + const enabled = alertConfig.enabled !== false; + const defaultThresholds = { cpu: 85, memory: 90, disk: 95 }; + const threshold = alertConfig.threshold || defaultThresholds[alertType]; + + updateSystemAlertDisplay(alertType, { enabled, threshold }); + }); } function testWebhookConnection() { @@ -1866,6 +1947,10 @@ ${isEditing ? 'Update Alert' : 'Create Alert'} // Global functions that need to be accessible from HTML onclick handlers + window.editSystemAlert = editSystemAlert; + window.closeSystemAlertModal = closeSystemAlertModal; + window.saveSystemAlert = saveSystemAlert; + window.toggleSystemAlert = function(alertId, enabled) { console.log(`Toggling system alert ${alertId} to ${enabled ? 'enabled' : 'disabled'}`); // TODO: Implement system alert toggle functionality