diff --git a/src/public/js/ui/alertManagementModal.js b/src/public/js/ui/alertManagementModal.js index 198f54c4a..461485eac 100644 --- a/src/public/js/ui/alertManagementModal.js +++ b/src/public/js/ui/alertManagementModal.js @@ -55,13 +55,6 @@ PulseApp.ui.alertManagementModal = (() => { Alert Rules - + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
@@ -436,151 +535,6 @@ PulseApp.ui.alertManagementModal = (() => { `; } - function renderGlobalSettingsTab() { - // Get current configuration from PulseApp.config if available - const config = PulseApp.config || {}; - const alerts = config.alerts || {}; - - return ` -
-
-
-

Global Alert Settings

-

Configure default alert thresholds and behavior for all VMs and LXCs

-
-
- - -
-

Alert Types & Thresholds

-

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

- - -
-
- 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

-
-
-
- - -
-
-
-

Custom Per-VM/LXC Thresholds

-

Override global settings for specific VMs or LXCs

-
- -
-
-

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 @@ -662,9 +616,6 @@ PulseApp.ui.alertManagementModal = (() => { } function initializeNotificationsTab() { - // Load email configuration into the email section - loadEmailConfiguration(); - // Set up nested tab navigation const subTabs = document.querySelectorAll('.notification-sub-tab'); subTabs.forEach(tab => { @@ -673,7 +624,33 @@ PulseApp.ui.alertManagementModal = (() => { switchNotificationSubTab(targetTab); }); }); - + + // Set up email provider selection + const emailProviderBtns = document.querySelectorAll('.email-provider-btn'); + emailProviderBtns.forEach(btn => { + btn.addEventListener('click', (e) => { + const provider = e.currentTarget.dataset.provider; + handleEmailProviderSelection(provider); + }); + }); + + // Set up advanced SMTP toggle + const advancedToggle = document.getElementById('toggle-advanced-smtp'); + if (advancedToggle) { + advancedToggle.addEventListener('click', toggleAdvancedSMTPSettings); + } + + // Set up email test and save buttons + const testEmailBtn = document.getElementById('test-email-btn'); + if (testEmailBtn) { + testEmailBtn.addEventListener('click', testEmailConnection); + } + + const saveEmailBtn = document.getElementById('save-email-config-btn'); + if (saveEmailBtn) { + saveEmailBtn.addEventListener('click', saveEmailConfiguration); + } + // Set up webhook preset buttons const webhookPresets = document.querySelectorAll('.webhook-preset'); webhookPresets.forEach(preset => { @@ -708,59 +685,11 @@ PulseApp.ui.alertManagementModal = (() => { console.log('Webhook notifications toggled:', e.target.checked); }); } + + // Load existing email configuration + loadEmailConfiguration(); } - 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 @@ -1007,6 +936,126 @@ PulseApp.ui.alertManagementModal = (() => { alert('Webhook configuration saved successfully!'); } + function handleEmailProviderSelection(provider) { + // Remove active state from all buttons + document.querySelectorAll('.email-provider-btn').forEach(btn => { + btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20'); + }); + + // Add active state to selected button + const selectedBtn = document.querySelector(`[data-provider="${provider}"]`); + selectedBtn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20'); + + // Update form fields based on provider + const helpDiv = document.getElementById('email-provider-help'); + const passwordLabel = document.getElementById('password-label'); + const passwordHelp = document.getElementById('password-help'); + const hostInput = document.querySelector('input[name="ALERT_SMTP_HOST"]'); + const portInput = document.querySelector('input[name="ALERT_SMTP_PORT"]'); + const secureCheckbox = document.querySelector('input[name="ALERT_SMTP_SECURE"]'); + + const providers = { + gmail: { + host: 'smtp.gmail.com', + port: 587, + secure: true, + passwordLabel: 'App Password', + passwordHelp: '(Generate from Google Account settings)', + help: 'For Gmail, you need to enable 2-factor authentication and generate an App Password. Go to Google Account → Security → 2-Step Verification → App passwords.' + }, + outlook: { + host: 'smtp-mail.outlook.com', + port: 587, + secure: true, + passwordLabel: 'Password', + passwordHelp: '(Your Microsoft account password)', + help: 'Use your regular Microsoft account password. If you have 2FA enabled, you may need to generate an app password.' + }, + yahoo: { + host: 'smtp.mail.yahoo.com', + port: 587, + secure: true, + passwordLabel: 'App Password', + passwordHelp: '(Generate from Yahoo Account settings)', + help: 'For Yahoo Mail, you need to generate an App Password. Go to Yahoo Account Info → Account Security → Generate app password.' + }, + custom: { + host: '', + port: 587, + secure: true, + passwordLabel: 'Password', + passwordHelp: '(SMTP authentication password)', + help: 'Enter the SMTP settings provided by your email provider. Check their documentation for the correct host, port, and security settings.' + } + }; + + const config = providers[provider]; + if (config) { + if (hostInput) hostInput.value = config.host; + if (portInput) portInput.value = config.port; + if (secureCheckbox) secureCheckbox.checked = config.secure; + if (passwordLabel) passwordLabel.textContent = config.passwordLabel; + if (passwordHelp) passwordHelp.textContent = config.passwordHelp; + + if (helpDiv) { + helpDiv.textContent = config.help; + helpDiv.classList.remove('hidden'); + } + } + } + + function toggleAdvancedSMTPSettings() { + const settingsDiv = document.getElementById('advanced-smtp-settings'); + const icon = document.getElementById('advanced-smtp-icon'); + + if (settingsDiv.classList.contains('hidden')) { + settingsDiv.classList.remove('hidden'); + icon.style.transform = 'rotate(90deg)'; + } else { + settingsDiv.classList.add('hidden'); + icon.style.transform = 'rotate(0deg)'; + } + } + + function testEmailConnection() { + // Collect email configuration + const emailConfig = { + from: document.querySelector('input[name="ALERT_FROM_EMAIL"]')?.value, + to: document.querySelector('input[name="ALERT_TO_EMAIL"]')?.value, + password: document.querySelector('input[name="ALERT_EMAIL_PASSWORD"]')?.value, + host: document.querySelector('input[name="ALERT_SMTP_HOST"]')?.value, + port: document.querySelector('input[name="ALERT_SMTP_PORT"]')?.value, + user: document.querySelector('input[name="ALERT_SMTP_USER"]')?.value, + secure: document.querySelector('input[name="ALERT_SMTP_SECURE"]')?.checked + }; + + if (!emailConfig.from || !emailConfig.to) { + alert('Please enter both sender and recipient email addresses'); + return; + } + + // TODO: Implement actual email test + console.log('Testing email configuration:', emailConfig); + alert('Test email functionality will be implemented with backend integration'); + } + + function saveEmailConfiguration() { + // Collect email configuration + const emailConfig = { + from: document.querySelector('input[name="ALERT_FROM_EMAIL"]')?.value, + to: document.querySelector('input[name="ALERT_TO_EMAIL"]')?.value, + password: document.querySelector('input[name="ALERT_EMAIL_PASSWORD"]')?.value, + host: document.querySelector('input[name="ALERT_SMTP_HOST"]')?.value, + port: document.querySelector('input[name="ALERT_SMTP_PORT"]')?.value, + user: document.querySelector('input[name="ALERT_SMTP_USER"]')?.value, + secure: document.querySelector('input[name="ALERT_SMTP_SECURE"]')?.checked + }; + + // TODO: Implement saving to backend + console.log('Saving email configuration:', emailConfig); + alert('Email configuration saved successfully!'); + } + function testWebhookConnection() { const webhookUrl = document.getElementById('webhook-url-input')?.value; if (!webhookUrl) { @@ -1659,64 +1708,6 @@ ${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) {