gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-22 19:23:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

partial: remove main renderAlertsTab function from settings

Browse Source 
- 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>
This commit is contained in:
courtmanr@gmail.com
2025-06-05 12:47:46 +01:00
parent 08088bbe64
commit 9c34712b2d
1 changed files with 0 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/js/ui/settings.js
-317
View File
@@ -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');