status-monitor.html•14.4 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Memory Server - Status Monitor</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
color: white;
margin-bottom: 30px;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.status-card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.status-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.status-card h3 {
color: #4a5568;
margin-bottom: 15px;
font-size: 1.3em;
display: flex;
align-items: center;
gap: 10px;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.status-running { background: #48bb78; }
.status-stopped { background: #f56565; }
.status-warning { background: #ed8936; }
.metric {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.metric:last-child {
border-bottom: none;
margin-bottom: 0;
}
.metric-value {
font-weight: bold;
color: #2d3748;
}
.controls {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.controls h3 {
color: #4a5568;
margin-bottom: 20px;
font-size: 1.3em;
}
.button-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: #4299e1;
color: white;
}
.btn-primary:hover {
background: #3182ce;
transform: translateY(-2px);
}
.btn-success {
background: #48bb78;
color: white;
}
.btn-success:hover {
background: #38a169;
transform: translateY(-2px);
}
.btn-danger {
background: #f56565;
color: white;
}
.btn-danger:hover {
background: #e53e3e;
transform: translateY(-2px);
}
.btn-warning {
background: #ed8936;
color: white;
}
.btn-warning:hover {
background: #dd6b20;
transform: translateY(-2px);
}
.logs {
background: #1a202c;
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
color: #e2e8f0;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
max-height: 400px;
overflow-y: auto;
}
.logs h3 {
color: #cbd5e0;
margin-bottom: 15px;
font-family: 'Segoe UI', sans-serif;
}
.log-entry {
margin-bottom: 5px;
padding: 2px 0;
}
.log-info { color: #63b3ed; }
.log-success { color: #68d391; }
.log-warning { color: #f6ad55; }
.log-error { color: #fc8181; }
.auto-refresh {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.9);
padding: 10px 15px;
border-radius: 8px;
font-size: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.header h1 {
font-size: 2em;
}
.button-group {
justify-content: center;
}
.btn {
flex: 1;
min-width: 120px;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="auto-refresh">
🔄 Atualiza em <span id="countdown">30</span>s
</div>
<div class="container">
<div class="header">
<h1>🧠 MCP Memory Server</h1>
<p>Monitor de Status em Tempo Real</p>
</div>
<div class="status-grid">
<div class="status-card">
<h3>
<span id="server-indicator" class="status-indicator status-stopped"></span>
Status do Servidor
</h3>
<div class="metric">
<span>Estado:</span>
<span id="server-status" class="metric-value">Verificando...</span>
</div>
<div class="metric">
<span>PID:</span>
<span id="server-pid" class="metric-value">-</span>
</div>
<div class="metric">
<span>Uptime:</span>
<span id="server-uptime" class="metric-value">-</span>
</div>
<div class="metric">
<span>Última Verificação:</span>
<span id="last-check" class="metric-value">-</span>
</div>
</div>
<div class="status-card">
<h3>
<span class="status-indicator status-running"></span>
Métricas de Memória
</h3>
<div class="metric">
<span>Entidades:</span>
<span id="entities-count" class="metric-value">0</span>
</div>
<div class="metric">
<span>Relacionamentos:</span>
<span id="relations-count" class="metric-value">0</span>
</div>
<div class="metric">
<span>Observações:</span>
<span id="observations-count" class="metric-value">0</span>
</div>
<div class="metric">
<span>DB Size:</span>
<span id="db-size" class="metric-value">-</span>
</div>
</div>
<div class="status-card">
<h3>
<span class="status-indicator status-running"></span>
Performance
</h3>
<div class="metric">
<span>CPU:</span>
<span id="cpu-usage" class="metric-value">-</span>
</div>
<div class="metric">
<span>Memória:</span>
<span id="memory-usage" class="metric-value">-</span>
</div>
<div class="metric">
<span>Conexões:</span>
<span id="connections" class="metric-value">0</span>
</div>
<div class="metric">
<span>Versão:</span>
<span id="version" class="metric-value">1.0.0</span>
</div>
</div>
</div>
<div class="controls">
<h3>🎛️ Controles</h3>
<div class="button-group">
<button class="btn btn-success" onclick="startServer()">
▶️ Iniciar
</button>
<button class="btn btn-danger" onclick="stopServer()">
⏹️ Parar
</button>
<button class="btn btn-warning" onclick="restartServer()">
🔄 Reiniciar
</button>
<button class="btn btn-primary" onclick="buildServer()">
🔨 Build
</button>
<button class="btn btn-primary" onclick="testServer()">
🧪 Testar
</button>
<button class="btn btn-primary" onclick="openVSCode()">
📝 VS Code
</button>
</div>
</div>
<div class="logs">
<h3>📋 Logs Recentes</h3>
<div id="log-container">
<div class="log-entry log-info">[INFO] Dashboard iniciado...</div>
</div>
</div>
</div>
<script>
let refreshInterval = 30;
let countdownTimer;
let refreshTimer;
// Simular dados para demonstração
function updateStatus() {
const serverStatus = Math.random() > 0.1 ? 'running' : 'stopped';
const indicator = document.getElementById('server-indicator');
const statusText = document.getElementById('server-status');
if (serverStatus === 'running') {
indicator.className = 'status-indicator status-running';
statusText.textContent = 'Rodando';
document.getElementById('server-pid').textContent = Math.floor(Math.random() * 10000 + 1000);
document.getElementById('server-uptime').textContent = Math.floor(Math.random() * 24) + 'h ' + Math.floor(Math.random() * 60) + 'm';
} else {
indicator.className = 'status-indicator status-stopped';
statusText.textContent = 'Parado';
document.getElementById('server-pid').textContent = '-';
document.getElementById('server-uptime').textContent = '-';
}
// Atualizar métricas
document.getElementById('entities-count').textContent = Math.floor(Math.random() * 100);
document.getElementById('relations-count').textContent = Math.floor(Math.random() * 50);
document.getElementById('observations-count').textContent = Math.floor(Math.random() * 500);
document.getElementById('db-size').textContent = (Math.random() * 10).toFixed(1) + ' MB';
document.getElementById('cpu-usage').textContent = (Math.random() * 15).toFixed(1) + '%';
document.getElementById('memory-usage').textContent = (Math.random() * 100 + 50).toFixed(0) + ' MB';
document.getElementById('connections').textContent = Math.floor(Math.random() * 5);
document.getElementById('last-check').textContent = new Date().toLocaleTimeString();
addLog(serverStatus === 'running' ? 'Servidor verificado - OK' : 'Servidor não está rodando',
serverStatus === 'running' ? 'success' : 'warning');
}
function addLog(message, type = 'info') {
const container = document.getElementById('log-container');
const entry = document.createElement('div');
entry.className = `log-entry log-${type}`;
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
container.insertBefore(entry, container.firstChild);
// Manter apenas últimos 20 logs
while (container.children.length > 20) {
container.removeChild(container.lastChild);
}
}
function startCountdown() {
let seconds = refreshInterval;
countdownTimer = setInterval(() => {
seconds--;
document.getElementById('countdown').textContent = seconds;
if (seconds <= 0) {
seconds = refreshInterval;
updateStatus();
}
}, 1000);
}
function startServer() {
addLog('Comando: Iniciar servidor', 'info');
// Aqui seria a chamada real para o PowerShell
setTimeout(() => addLog('Servidor iniciado com sucesso', 'success'), 1000);
}
function stopServer() {
addLog('Comando: Parar servidor', 'info');
setTimeout(() => addLog('Servidor parado', 'warning'), 500);
}
function restartServer() {
addLog('Comando: Reiniciar servidor', 'info');
setTimeout(() => addLog('Servidor reiniciado', 'success'), 1500);
}
function buildServer() {
addLog('Comando: Build do projeto', 'info');
setTimeout(() => addLog('Build concluído', 'success'), 2000);
}
function testServer() {
addLog('Comando: Executar testes', 'info');
setTimeout(() => addLog('Testes executados com sucesso', 'success'), 1500);
}
function openVSCode() {
addLog('Abrindo VS Code...', 'info');
}
// Inicializar
updateStatus();
startCountdown();
// Atualizar a cada 30 segundos
refreshTimer = setInterval(updateStatus, refreshInterval * 1000);
</script>
</body>
</html>