MCP Vulnerability Management System

{% extends "base.html" %} {% block title %}Tickets{% endblock %} {% block content %} <div class="container mt-4"> <div class="d-flex justify-content-between align-items-center mb-4"> <h1>Tickets</h1> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTicketModal"> <i class="bi bi-plus-lg"></i> New Ticket </button> </div> <!-- Filters --> <div class="card mb-4"> <div class="card-body"> <form id="filterForm" class="row g-3"> <div class="col-md-4"> <label for="status" class="form-label">Status</label> <select class="form-select" id="status" name="status"> <option value="">All</option> <option value="open">Open</option> <option value="in_progress">In Progress</option> <option value="resolved">Resolved</option> <option value="closed">Closed</option> </select> </div> <div class="col-md-4"> <label for="priority" class="form-label">Priority</label> <select class="form-select" id="priority" name="priority"> <option value="">All</option> <option value="low">Low</option> <option value="medium">Medium</option> <option value="high">High</option> <option value="critical">Critical</option> </select> </div> <div class="col-md-4 d-flex align-items-end"> <button type="submit" class="btn btn-primary">Apply Filters</button> </div> </form> </div> </div> <!-- Tickets Table --> <div class="card"> <div class="card-body"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>ID</th> <th>Subject</th> <th>Status</th> <th>Priority</th> <th>Created</th> <th>Updated</th> <th>Actions</th> </tr> </thead> <tbody id="ticketsTableBody"> <!-- Tickets will be loaded here --> </tbody> </table> </div> <!-- Pagination --> <nav aria-label="Page navigation" class="mt-4"> <ul class="pagination justify-content-center" id="pagination"> <!-- Pagination will be loaded here --> </ul> </nav> </div> </div> </div> <!-- Create Ticket Modal --> <div class="modal fade" id="createTicketModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Create New Ticket</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form id="createTicketForm"> <div class="mb-3"> <label for="subject" class="form-label">Subject</label> <input type="text" class="form-control" id="subject" name="subject" required> </div> <div class="mb-3"> <label for="description" class="form-label">Description</label> <textarea class="form-control" id="description" name="description" rows="4" required></textarea> </div> <div class="mb-3"> <label for="priority" class="form-label">Priority</label> <select class="form-select" id="priority" name="priority" required> <option value="low">Low</option> <option value="medium" selected>Medium</option> <option value="high">High</option> <option value="critical">Critical</option> </select> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="createTicketBtn">Create Ticket</button> </div> </div> </div> </div> {% endblock %} {% block scripts %} <script> document.addEventListener('DOMContentLoaded', function() { let currentPage = 1; const pageSize = 10; let currentFilters = {}; // Load tickets async function loadTickets(page = 1) { const params = new URLSearchParams({ page: page, size: pageSize, ...currentFilters }); try { const response = await api.get(`/api/v1/tickets?${params}`); const data = await response.json(); // Update table const tbody = document.getElementById('ticketsTableBody'); tbody.innerHTML = data.tickets.map(ticket => ` <tr> <td>${ticket.id}</td> <td>${ticket.subject}</td> <td><span class="badge bg-${getStatusColor(ticket.status)}">${ticket.status}</span></td> <td><span class="badge bg-${getPriorityColor(ticket.priority)}">${ticket.priority}</span></td> <td>${formatDate(ticket.created_at)}</td> <td>${formatDate(ticket.updated_at)}</td> <td> <a href="/tickets/${ticket.id}" class="btn btn-sm btn-primary"> <i class="bi bi-eye"></i> </a> </td> </tr> `).join(''); // Update pagination updatePagination(data.total, page, pageSize); } catch (error) { showMessage('Error loading tickets', 'danger'); } } // Handle filter form submission document.getElementById('filterForm').addEventListener('submit', function(e) { e.preventDefault(); currentFilters = { status: document.getElementById('status').value, priority: document.getElementById('priority').value }; currentPage = 1; loadTickets(currentPage); }); // Handle create ticket document.getElementById('createTicketBtn').addEventListener('click', async function() { const form = document.getElementById('createTicketForm'); const formData = new FormData(form); try { const response = await api.post('/api/v1/tickets', { subject: formData.get('subject'), description: formData.get('description'), priority: formData.get('priority') }); if (response.ok) { const modal = bootstrap.Modal.getInstance(document.getElementById('createTicketModal')); modal.hide(); form.reset(); loadTickets(currentPage); showMessage('Ticket created successfully', 'success'); } } catch (error) { showMessage('Error creating ticket', 'danger'); } }); // Helper functions function getStatusColor(status) { const colors = { 'open': 'primary', 'in_progress': 'warning', 'resolved': 'success', 'closed': 'secondary' }; return colors[status] || 'secondary'; } function getPriorityColor(priority) { const colors = { 'low': 'info', 'medium': 'primary', 'high': 'warning', 'critical': 'danger' }; return colors[priority] || 'secondary'; } function updatePagination(total, currentPage, pageSize) { const totalPages = Math.ceil(total / pageSize); const pagination = document.getElementById('pagination'); let html = ''; // Previous button html += ` <li class="page-item ${currentPage === 1 ? 'disabled' : ''}"> <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a> </li> `; // Page numbers for (let i = 1; i <= totalPages; i++) { html += ` <li class="page-item ${i === currentPage ? 'active' : ''}"> <a class="page-link" href="#" data-page="${i}">${i}</a> </li> `; } // Next button html += ` <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}"> <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a> </li> `; pagination.innerHTML = html; // Add click handlers pagination.querySelectorAll('.page-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const page = parseInt(this.dataset.page); if (page >= 1 && page <= totalPages) { currentPage = page; loadTickets(currentPage); } }); }); } // Initial load loadTickets(currentPage); }); </script> {% endblock %}