From 9c34712b2d40210a982eb7902b68b56ae39c1bee Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Thu, 5 Jun 2025 12:47:46 +0100
Subject: [PATCH] partial: remove main renderAlertsTab function from settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed the massive renderAlertsTab function (314 lines)
- Removed alerts case from main tab switch
- Still need to remove remaining alert references and functions
- This is partial cleanup to avoid having duplicate alert management

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/public/js/ui/settings.js | 317 -----------------------------------
 1 file changed, 317 deletions(-)

diff --git a/src/public/js/ui/settings.js b/src/public/js/ui/settings.js
index 47628d53e..471556a3b 100644
--- a/src/public/js/ui/settings.js
+++ b/src/public/js/ui/settings.js
@@ -173,9 +173,6 @@ PulseApp.ui.settings = (() => {
             case 'pbs':
                 content = renderPBSTab(pbs, safeConfig);
                 break;
-            case 'alerts':
-                content = renderAlertsTab(alerts, safeConfig);
-                break;
             case 'system':
                 content = renderSystemTab(advanced, safeConfig);
                 break;
@@ -446,320 +443,6 @@ PulseApp.ui.settings = (() => {
         `;
     }
 
-    function renderAlertsTab(alerts, config) {
-        const smtp = config.advanced?.smtp || {};
-        return `
-            <div class="space-y-6">
-
-                <!-- Email Notification Settings -->
-                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
-                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Email Notifications</h3>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Set up email alerts for critical system events. We'll help you configure this automatically.</p>
-                    
-                    <!-- Step 1: Email Provider Selection -->
-                    <div class="mb-6">
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                            Step 1: Choose your email provider
-                        </label>
-                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
-                            <button type="button" class="email-provider-btn p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg text-center hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-provider="gmail">
-                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Gmail</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-400">Google</div>
-                            </button>
-                            <button type="button" class="email-provider-btn p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg text-center hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-provider="outlook">
-                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Outlook</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-400">Microsoft</div>
-                            </button>
-                            <button type="button" class="email-provider-btn p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg text-center hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-provider="yahoo">
-                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Yahoo</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-400">Yahoo Mail</div>
-                            </button>
-                            <button type="button" class="email-provider-btn p-3 border-2 border-gray-200 dark:border-gray-600 rounded-lg text-center hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all" data-provider="custom">
-                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Other</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-400">Custom SMTP</div>
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Step 2: Basic Email Configuration -->
-                    <div class="mb-6">
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                            Step 2: Enter your email details
-                        </label>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                    Your Email Address
-                                    <span class="text-gray-500 text-xs ml-1">(for sending alerts)</span>
-                                </label>
-                                <input type="email" id="email-from-input" name="ALERT_FROM_EMAIL"
-                                       value="${smtp.from || ''}"
-                                       placeholder="your-email@gmail.com"
-                                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                    Alert Recipients
-                                    <span class="text-gray-500 text-xs ml-1">(who gets notified)</span>
-                                </label>
-                                <input type="text" name="ALERT_TO_EMAIL"
-                                       value="${smtp.to || ''}"
-                                       placeholder="admin@example.com, tech@example.com"
-                                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Separate multiple emails with commas</p>
-                            </div>
-                        </div>
-                        
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                <span id="password-label">Email Password</span>
-                            </label>
-                            <input type="password" name="SMTP_PASS"
-                                   value=""
-                                   placeholder="••••••••••••••••"
-                                   class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                            <div id="password-help" class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                Enter your email password
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Provider-specific Help -->
-                    <div id="provider-help" class="hidden mb-4">
-                        <!-- Gmail Help -->
-                        <div id="gmail-help" class="hidden bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded p-3">
-                            <div class="flex">
-                                <div class="flex-shrink-0">
-                                    <svg class="h-4 w-4 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-2">
-                                    <p class="text-xs text-blue-700 dark:text-blue-300">
-                                        <strong>Gmail Setup:</strong> You need an App Password (not your regular password). 
-                                        <a href="https://myaccount.google.com/apppasswords" target="_blank" class="underline font-medium">Create one here</a> → 
-                                        Search "Mail" → Generate → Copy the 16-character password above.<br>
-                                        <strong>Important:</strong> Leave SSL checkbox UNCHECKED (Gmail uses STARTTLS on port 587).
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Outlook Help -->
-                        <div id="outlook-help" class="hidden bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded p-3">
-                            <div class="flex">
-                                <div class="flex-shrink-0">
-                                    <svg class="h-4 w-4 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-2">
-                                    <p class="text-xs text-blue-700 dark:text-blue-300">
-                                        <strong>Outlook Setup:</strong> Use your regular email password. If you have 2FA enabled, you may need an app password.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Yahoo Help -->
-                        <div id="yahoo-help" class="hidden bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded p-3">
-                            <div class="flex">
-                                <div class="flex-shrink-0">
-                                    <svg class="h-4 w-4 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-2">
-                                    <p class="text-xs text-blue-700 dark:text-blue-300">
-                                        <strong>Yahoo Setup:</strong> You'll need an App Password. Go to Account Security → Generate app password → Use that instead of your regular password.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Advanced Settings (Collapsible) -->
-                    <div class="mb-4">
-                        <button type="button" id="toggle-advanced-email" class="flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
-                            <svg id="advanced-email-icon" class="h-4 w-4 mr-1 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                            </svg>
-                            Advanced Settings
-                        </button>
-                        <div id="advanced-email-settings" class="hidden mt-3 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                        SMTP Server
-                                    </label>
-                                    <input type="text" name="SMTP_HOST"
-                                           value="${smtp.host || ''}"
-                                           placeholder="smtp.gmail.com"
-                                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                        Port
-                                    </label>
-                                    <input type="number" name="SMTP_PORT"
-                                           value="${smtp.port || ''}"
-                                           placeholder="587"
-                                           min="25" max="65535"
-                                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                        Username
-                                    </label>
-                                    <input type="text" name="SMTP_USER"
-                                           value="${smtp.user || ''}"
-                                           placeholder="your-email@gmail.com"
-                                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="flex items-center">
-                                    <input type="checkbox" name="SMTP_SECURE" ${smtp.secure ? 'checked' : ''}
-                                           class="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                    <span class="text-sm text-gray-700 dark:text-gray-300">Use SSL encryption (port 465)</span>
-                                </label>
-                                <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded p-2">
-                                    <p class="text-xs text-amber-700 dark:text-amber-300">
-                                        <strong>For Gmail/Outlook/Yahoo:</strong> Leave this <strong>UNCHECKED</strong> - they use STARTTLS (port 587), not SSL (port 465)
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Test Button -->
-                    <div class="flex items-center justify-between">
-                        <div id="email-config-status" class="text-sm"></div>
-                        <button type="button" id="test-email-btn" 
-                                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded transition-colors">
-                            Test Email Configuration
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Webhook Notifications -->
-                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
-                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Webhook Notifications</h3>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Send alert notifications to Discord, Slack, Teams, or any webhook-compatible service.</p>
-                    
-                    <div class="grid grid-cols-1 gap-4 mb-4">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Webhook URL
-                            </label>
-                            <input type="url" name="WEBHOOK_URL"
-                                   value="${(config.advanced && config.advanced.webhook && config.advanced.webhook.url) || config.WEBHOOK_URL || ''}"
-                                   placeholder="https://discord.com/api/webhooks/..."
-                                   class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Discord, Slack, Teams, or any webhook endpoint</p>
-                        </div>
-                    </div>
-                    
-                    <div class="flex items-center space-x-4 mb-4">
-                        <label class="flex items-center">
-                            <input type="checkbox" name="WEBHOOK_ENABLED" ${(config.advanced && config.advanced.webhook && config.advanced.webhook.enabled) || config.WEBHOOK_ENABLED === 'true' ? 'checked' : ''}
-                                   class="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Enable Webhook Notifications</span>
-                        </label>
-                        <button type="button" id="test-webhook-btn" 
-                                class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white text-xs font-medium rounded transition-colors">
-                            Test Webhook
-                        </button>
-                    </div>
-                    
-                    <div class="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded p-3">
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <svg class="h-4 w-4 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                                </svg>
-                            </div>
-                            <div class="ml-2">
-                                <p class="text-xs text-purple-700 dark:text-purple-300">
-                                    <strong>Popular services:</strong><br>
-                                    • <strong>Discord:</strong> Server Settings → Integrations → Webhooks<br>
-                                    • <strong>Slack:</strong> Apps → Incoming Webhooks<br>
-                                    • <strong>Teams:</strong> Channel → Connectors → Incoming Webhook
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Custom Per-VM/LXC Thresholds Section -->
-                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                    <div class="flex items-start">
-                        <div class="flex-shrink-0">
-                            <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                            </svg>
-                        </div>
-                        <div class="ml-3">
-                            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">Custom Per-VM/LXC Thresholds</h3>
-                            <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">Configure custom alert thresholds for individual VMs/LXCs based on their specific resource requirements and usage patterns.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Custom Threshold Configurations</h3>
-                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">VMs and containers with custom alert thresholds</p>
-                            </div>
-                            <button type="button" id="add-threshold-btn" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                                </svg>
-                                Add Custom Threshold
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <div id="thresholds-loading" class="px-6 py-8 text-center">
-                        <div class="inline-flex items-center">
-                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
-                            <span class="text-gray-600 dark:text-gray-400">Loading threshold configurations...</span>
-                        </div>
-                    </div>
-                    
-                    <div id="thresholds-container" class="hidden">
-                        <div id="thresholds-list" class="divide-y divide-gray-200 dark:divide-gray-700">
-                            <!-- Threshold configurations will be loaded here -->
-                        </div>
-                        
-                        <div id="thresholds-empty" class="hidden px-6 py-8 text-center">
-                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 00-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4"></path>
-                            </svg>
-                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No custom thresholds configured</h3>
-                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding a custom threshold configuration for a VM or container.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4">
-                    <div class="space-y-2">
-                        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">Examples:</h4>
-                        <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                            <li>• <strong>Storage/NAS VMs:</strong> Set memory warning to 95% and critical to 99% (high memory usage from disk caching is normal)</li>
-                            <li>• <strong>Application Servers:</strong> Set CPU warning to 70% and critical to 85% for better performance monitoring</li>
-                            <li>• <strong>Development VMs:</strong> Set disk warning to 75% and critical to 90% for early space alerts</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        `;
-    }
 
     function renderSystemTab(advanced, config) {
         const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');