MCP Vulnerability Management System

{% extends "base.html" %} {% block title %}Notification Settings{% endblock %} {% block content %} <div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h3 class="card-title">Notification Settings</h3> <div class="card-tools"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addNotificationModal"> <i class="fas fa-plus"></i> Add Notification </button> </div> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered table-striped" id="notificationsTable"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Status</th> <th>Last Test</th> <th>Actions</th> </tr> </thead> <tbody> <!-- Table content will be loaded dynamically --> </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- Add Notification Modal --> <div class="modal fade" id="addNotificationModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add Notification</h5> <button type="button" class="close" data-dismiss="modal"> <span>&times;</span> </button> </div> <div class="modal-body"> <form id="addNotificationForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required> </div> <div class="form-group"> <label for="type">Type</label> <select class="form-control" id="type" required> <option value="email">Email</option> <option value="webhook">Webhook</option> <option value="slack">Slack</option> <option value="teams">Microsoft Teams</option> </select> </div> <div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="enabled" checked> <label class="custom-control-label" for="enabled">Enabled</label> </div> </div> <!-- Email Configuration --> <div id="emailConfig" class="notification-config"> <div class="form-group"> <label for="emailRecipients">Recipients</label> <input type="text" class="form-control" id="emailRecipients" placeholder="comma-separated emails"> </div> <div class="form-group"> <label for="emailSubject">Subject Template</label> <input type="text" class="form-control" id="emailSubject" value="Alert: {{alert.type}} - {{alert.level}}"> </div> </div> <!-- Webhook Configuration --> <div id="webhookConfig" class="notification-config" style="display: none;"> <div class="form-group"> <label for="webhookUrl">Webhook URL</label> <input type="url" class="form-control" id="webhookUrl"> </div> <div class="form-group"> <label for="webhookMethod">HTTP Method</label> <select class="form-control" id="webhookMethod"> <option value="POST">POST</option> <option value="PUT">PUT</option> </select> </div> </div> <!-- Slack Configuration --> <div id="slackConfig" class="notification-config" style="display: none;"> <div class="form-group"> <label for="slackWebhookUrl">Webhook URL</label> <input type="url" class="form-control" id="slackWebhookUrl"> </div> <div class="form-group"> <label for="slackChannel">Channel</label> <input type="text" class="form-control" id="slackChannel" placeholder="#alerts"> </div> </div> <!-- Teams Configuration --> <div id="teamsConfig" class="notification-config" style="display: none;"> <div class="form-group"> <label for="teamsWebhookUrl">Webhook URL</label> <input type="url" class="form-control" id="teamsWebhookUrl"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="saveNotification">Save</button> </div> </div> </div> </div> <!-- Edit Notification Modal --> <div class="modal fade" id="editNotificationModal" tabindex="-1" role="dialog"> <!-- Similar structure to Add Notification Modal --> </div> <!-- Notification Logs Modal --> <div class="modal fade" id="logsModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Notification Logs</h5> <button type="button" class="close" data-dismiss="modal"> <span>&times;</span> </button> </div> <div class="modal-body"> <div class="table-responsive"> <table class="table table-bordered" id="logsTable"> <thead> <tr> <th>Timestamp</th> <th>Status</th> <th>Error Message</th> </tr> </thead> <tbody> <!-- Logs will be loaded dynamically --> </tbody> </table> </div> </div> </div> </div> </div> {% endblock %} {% block scripts %} <script> $(document).ready(function() { // Load notifications function loadNotifications() { $.get('/api/notifications', function(data) { const tbody = $('#notificationsTable tbody'); tbody.empty(); data.forEach(function(notification) { const row = ` <tr> <td>${notification.name}</td> <td>${notification.type}</td> <td> <span class="badge badge-${notification.enabled ? 'success' : 'danger'}"> ${notification.enabled ? 'Enabled' : 'Disabled'} </span> </td> <td>${notification.last_test || 'Never'}</td> <td> <button class="btn btn-sm btn-info test-notification" data-id="${notification.id}"> <i class="fas fa-bell"></i> Test </button> <button class="btn btn-sm btn-primary edit-notification" data-id="${notification.id}"> <i class="fas fa-edit"></i> Edit </button> <button class="btn btn-sm btn-danger delete-notification" data-id="${notification.id}"> <i class="fas fa-trash"></i> Delete </button> <button class="btn btn-sm btn-secondary view-logs" data-id="${notification.id}"> <i class="fas fa-history"></i> Logs </button> </td> </tr> `; tbody.append(row); }); }); } // Handle notification type change $('#type').change(function() { $('.notification-config').hide(); $(`#${$(this).val()}Config`).show(); }); // Save new notification $('#saveNotification').click(function() { const type = $('#type').val(); const config = { name: $('#name').val(), type: type, enabled: $('#enabled').is(':checked'), config: {} }; switch(type) { case 'email': config.config = { recipients: $('#emailRecipients').val().split(','), subject_template: $('#emailSubject').val() }; break; case 'webhook': config.config = { url: $('#webhookUrl').val(), method: $('#webhookMethod').val() }; break; case 'slack': config.config = { webhook_url: $('#slackWebhookUrl').val(), channel: $('#slackChannel').val() }; break; case 'teams': config.config = { webhook_url: $('#teamsWebhookUrl').val() }; break; } $.post('/api/notifications', JSON.stringify(config), function() { $('#addNotificationModal').modal('hide'); loadNotifications(); }); }); // Test notification $(document).on('click', '.test-notification', function() { const id = $(this).data('id'); $.post(`/api/notifications/${id}/test`, function(response) { alert('Test notification sent successfully'); }).fail(function() { alert('Failed to send test notification'); }); }); // View logs $(document).on('click', '.view-logs', function() { const id = $(this).data('id'); $.get(`/api/notifications/${id}/logs`, function(logs) { const tbody = $('#logsTable tbody'); tbody.empty(); logs.forEach(function(log) { const row = ` <tr> <td>${new Date(log.created_at).toLocaleString()}</td> <td> <span class="badge badge-${log.status === 'success' ? 'success' : 'danger'}"> ${log.status} </span> </td> <td>${log.error_message || '-'}</td> </tr> `; tbody.append(row); }); $('#logsModal').modal('show'); }); }); // Delete notification $(document).on('click', '.delete-notification', function() { if (confirm('Are you sure you want to delete this notification?')) { const id = $(this).data('id'); $.ajax({ url: `/api/notifications/${id}`, method: 'DELETE', success: function() { loadNotifications(); } }); } }); // Initial load loadNotifications(); }); </script> {% endblock %}