MCP Vulnerability Management System
by nesirat
admin.html•23.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP - Admin Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.css" rel="stylesheet">
<style>
.sidebar {
min-height: 100vh;
background: #343a40;
color: white;
}
.sidebar .nav-link {
color: rgba(255,255,255,.75);
}
.sidebar .nav-link:hover {
color: white;
}
.sidebar .nav-link.active {
color: white;
background: rgba(255,255,255,.1);
}
.main-content {
padding: 20px;
}
.card {
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.stats-card {
background: linear-gradient(45deg, #4e73df, #224abe);
color: white;
}
.stats-card .card-body {
padding: 1.5rem;
}
.stats-card .icon {
font-size: 2rem;
opacity: 0.5;
}
.table-responsive {
margin-top: 20px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 px-0 sidebar">
<div class="p-3">
<h4>MCP Admin</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#dashboard" data-bs-toggle="tab">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#users" data-bs-toggle="tab">
<i class="fas fa-users me-2"></i>Users
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#logs" data-bs-toggle="tab">
<i class="fas fa-clipboard-list me-2"></i>Logs
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" data-bs-toggle="tab">
<i class="fas fa-cog me-2"></i>Settings
</a>
</li>
</ul>
</div>
<!-- Main Content -->
<div class="col-md-9 col-lg-10 main-content">
<div class="tab-content">
<!-- Dashboard Tab -->
<div class="tab-pane fade show active" id="dashboard">
<h2 class="mb-4">Dashboard</h2>
<!-- Stats Cards -->
<div class="row">
<div class="col-md-3">
<div class="card stats-card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">Total Users</h6>
<h2 class="mb-0">{{ stats.total_users }}</h2>
</div>
<div class="icon">
<i class="fas fa-users"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stats-card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">Active Users</h6>
<h2 class="mb-0">{{ stats.active_users }}</h2>
</div>
<div class="icon">
<i class="fas fa-user-check"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stats-card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">Total Tickets</h6>
<h2 class="mb-0">{{ stats.total_tickets }}</h2>
</div>
<div class="icon">
<i class="fas fa-ticket-alt"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stats-card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="card-title">Open Tickets</h6>
<h2 class="mb-0">{{ stats.open_tickets }}</h2>
</div>
<div class="icon">
<i class="fas fa-exclamation-circle"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="row mt-4">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">User Activity</h5>
<canvas id="userActivityChart"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ticket Status</h5>
<canvas id="ticketStatusChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Users Tab -->
<div class="tab-pane fade" id="users">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>User Management</h2>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
<i class="fas fa-plus me-2"></i>Add User
</button>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>User</th>
<th>Email</th>
<th>Status</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>
<div class="d-flex align-items-center">
<div class="user-avatar me-2">
{{ user.email[0].upper() }}
</div>
{{ user.email.split('@')[0] }}
</div>
</td>
<td>{{ user.email }}</td>
<td>
{% if user.is_active %}
<span class="badge bg-success">Active</span>
{% else %}
<span class="badge bg-danger">Inactive</span>
{% endif %}
</td>
<td>
{% if user.is_admin %}
<span class="badge bg-primary">Admin</span>
{% else %}
<span class="badge bg-secondary">User</span>
{% endif %}
</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1" onclick="editUser({{ user.id }})">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteUser({{ user.id }})">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Logs Tab -->
<div class="tab-pane fade" id="logs">
<h2 class="mb-4">System Logs</h2>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Timestamp</th>
<th>Level</th>
<th>Message</th>
<th>User</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>{{ log.timestamp }}</td>
<td>
{% if log.level == 'ERROR' %}
<span class="badge bg-danger">ERROR</span>
{% elif log.level == 'WARNING' %}
<span class="badge bg-warning">WARNING</span>
{% else %}
<span class="badge bg-info">INFO</span>
{% endif %}
</td>
<td>{{ log.message }}</td>
<td>{{ log.user }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div class="tab-pane fade" id="settings">
<h2 class="mb-4">System Settings</h2>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Server Configuration</h5>
<form id="serverConfigForm">
<div class="mb-3">
<label class="form-label">Server Port</label>
<input type="number" class="form-control" name="port" value="{{ settings.port }}">
</div>
<div class="mb-3">
<label class="form-label">Debug Mode</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="debug" {% if settings.debug %}checked{% endif %}>
</div>
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">SSL Configuration</h5>
<form id="sslConfigForm">
<div class="mb-3">
<label class="form-label">SSL Certificate Path</label>
<input type="text" class="form-control" name="cert_path" value="{{ settings.ssl_cert_path }}">
</div>
<div class="mb-3">
<label class="form-label">SSL Key Path</label>
<input type="text" class="form-control" name="key_path" value="{{ settings.ssl_key_path }}">
</div>
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="addUserForm">
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" name="email" required>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" name="password" required>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="is_admin" id="isAdmin">
<label class="form-check-label" for="isAdmin">
Admin User
</label>
</div>
</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" onclick="submitAddUser()">Add User</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<script>
// Initialize charts
const userActivityCtx = document.getElementById('userActivityChart').getContext('2d');
new Chart(userActivityCtx, {
type: 'line',
data: {
labels: {{ stats.activity_labels | tojson }},
datasets: [{
label: 'Active Users',
data: {{ stats.activity_data | tojson }},
borderColor: '#4e73df',
tension: 0.1
}]
}
});
const ticketStatusCtx = document.getElementById('ticketStatusChart').getContext('2d');
new Chart(ticketStatusCtx, {
type: 'doughnut',
data: {
labels: ['Open', 'In Progress', 'Closed'],
datasets: [{
data: [
{{ stats.open_tickets }},
{{ stats.in_progress_tickets }},
{{ stats.closed_tickets }}
],
backgroundColor: ['#e74a3b', '#f6c23e', '#1cc88a']
}]
}
});
// Form submission handlers
function submitAddUser() {
const form = document.getElementById('addUserForm');
const formData = new FormData(form);
fetch('/admin/users', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert(data.error);
}
});
}
function editUser(userId) {
// Implement edit user functionality
}
function deleteUser(userId) {
if (confirm('Are you sure you want to delete this user?')) {
fetch(`/admin/users/${userId}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert(data.error);
}
});
}
}
// Server configuration form
document.getElementById('serverConfigForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('/admin/settings/server', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Server settings updated successfully');
} else {
alert(data.error);
}
});
});
// SSL configuration form
document.getElementById('sslConfigForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('/admin/settings/ssl', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('SSL settings updated successfully');
} else {
alert(data.error);
}
});
});
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/nesirat/MCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server