feat: integrate dashboard thresholds with unified alert management system

- Add comprehensive alert management modal with 3-tab structure (Alerts, Alert Rules, Notifications)
- Connect dashboard threshold buttons to new alert management system
- Implement threshold pre-population for custom alert creation
- Support multiple threshold capture from dashboard to single alert rule
- Add "Manage Alerts" button to alerts dropdown for centralized access
- Maintain backward compatibility with existing alert functionality
- Enhance user workflow from threshold setting to alert rule creation

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/public/index.html

@@ -906,9 +906,6 @@
           <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="alerts">
             Alert Configuration
           </button>
-          <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="alert-management">
-            Alert Management
-          </button>
           <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="system">
             System
           </button>
@@ -972,6 +969,7 @@
   <script src="/js/ui/backup-detail-card.js" defer></script>
   <script src="/js/ui/backups.js" defer></script>
   <script src="/js/ui/settings.js" defer></script>
+  <script src="/js/ui/alertManagementModal.js" defer></script>
   <script src="/js/alertsHandler.js"></script>
   <script src="/js/hotReload.js" defer></script>
   <script src="/js/main.js" defer></script>

src/public/js/alertsHandler.js

@@ -249,7 +249,11 @@ PulseApp.alerts = (() => {
                     <svg class="w-6 h-6 mx-auto mb-1 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                         ${SEVERITY_ICONS.info}
                     </svg>
-                    <p class="text-xs">No active alerts</p>
+                    <p class="text-xs mb-3">No active alerts</p>
+                    <button onclick="PulseApp.ui.alertManagementModal.openModal()" 
+                            class="w-full px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded transition-colors">
+                        Manage Alerts
+                    </button>
                 </div>
             `;
             return;
@@ -314,6 +318,20 @@ PulseApp.alerts = (() => {
             `;
         }
 
+        // Add Manage Alerts button to the bottom
+        content += `
+            <div class="border-t border-gray-200 dark:border-gray-700 p-2">
+                <button onclick="PulseApp.ui.alertManagementModal.openModal()" 
+                        class="w-full px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    Manage Alerts
+                </button>
+            </div>
+        `;
+        
         alertDropdown.innerHTML = content;
 
         // Restore scroll position if acknowledged section exists and was expanded

src/public/js/ui/settings.js

@@ -179,9 +179,6 @@ PulseApp.ui.settings = (() => {
             case 'system':
                 content = renderSystemTab(advanced, safeConfig);
                 break;
-            case 'alert-management':
-                content = renderAlertManagementTab();
-                break;
             case 'diagnostics':
                 content = renderDiagnosticsTab();
                 break;
@@ -212,9 +209,6 @@ PulseApp.ui.settings = (() => {
         } else if (activeTab === 'alerts') {
             // Load threshold configurations when alerts tab is opened
             loadThresholdConfigurations();
-        } else if (activeTab === 'alert-management') {
-            // Initialize alert management tab
-            initializeAlertManagementTab();
         }
     }
 
@@ -4325,7 +4319,16 @@ PulseApp.ui.settings = (() => {
         switchToChannel,
         acknowledgeStableChoice,
         proceedWithStableSwitch,
-        clearUpdateCache
+        clearUpdateCache,
+        // Expose alert-related functions for the alert management modal
+        renderAlertsTab,
+        renderAlertManagementTab,
+        loadThresholdConfigurations,
+        setupEmailProviderSelection,
+        setupEmailTestButton,
+        setupWebhookTestButton,
+        initializeAlertManagementTab,
+        getCurrentConfig: () => currentConfig
     };
 })();
 

src/public/js/ui/thresholds.js

@@ -138,16 +138,21 @@ PulseApp.ui.thresholds = (() => {
             return;
         }
 
-        // Show modal for creating alert rule
-        _showCreateAlertRuleModal(activeThresholds);
+        // Open the custom alert creation modal with pre-populated threshold values
+        if (PulseApp.ui && PulseApp.ui.alertManagementModal && PulseApp.ui.alertManagementModal.openCustomAlertModal) {
+            PulseApp.ui.alertManagementModal.openCustomAlertModal(activeThresholds);
+        } else {
+            // Fallback - show legacy modal if alert management isn't available
+            _showCreateAlertRuleModal(activeThresholds);
+        }
     }
 
     function _handleViewAlertRules() {
-        // Open the unified Alert Management interface in settings
-        if (PulseApp.ui && PulseApp.ui.settings && PulseApp.ui.settings.openModalWithTab) {
-            PulseApp.ui.settings.openModalWithTab('alert-management');
+        // Open the Alert Management modal directly to the Alert Rules tab
+        if (PulseApp.ui && PulseApp.ui.alertManagementModal && PulseApp.ui.alertManagementModal.openModal) {
+            PulseApp.ui.alertManagementModal.openModal('alert-rules');
         } else {
-            // Fallback to the old modal if settings isn't available
+            // Fallback to the old modal if alert management isn't available
             _showViewAlertRulesModal();
         }
     }