Hidosi/info-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: InfoUser Monitor with FastAPI, agent, Docker, JWT auth, notifications, filters and CSV export

Browse Source
This commit is contained in:
Hidosi
2026-07-16 11:53:51 +07:00
commit cf2727da2b
31 changed files with 1957 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/base.html
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}InfoUser Monitor{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="/static/style.css">
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">InfoUser Monitor</a>
{% if user %}
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item me-3">
<a href="/notifications" class="nav-link position-relative">
<i class="bi bi-bell"></i>
{% if unread_count %}
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
{{ unread_count }}
</span>
{% endif %}
</a>
</li>
<li class="nav-item"><span class="nav-link">{{ user.username }}</span></li>
<li class="nav-item"><a class="nav-link" href="/" id="logout-link">Выйти</a></li>
</ul>
</div>
{% endif %}
</div>
</nav>
<main class="container py-4">
{% block content %}{% endblock %}
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="/static/app.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
server/templates/computer.html
+127
View File
@@ -0,0 +1,127 @@
{% extends "base.html" %}
{% block title %}{{ computer.hostname }} — InfoUser Monitor{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>{{ computer.hostname }}</h2>
<a href="/" class="btn btn-outline-secondary">← Назад</a>
</div>
<div class="row g-4 mb-4">
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<div class="text-muted small">Статус</div>
<span class="badge {% if computer.status == 'online' %}bg-success{% else %}bg-secondary{% endif %} fs-6">
{{ computer.status }}
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<div class="text-muted small">Пользователь</div>
<div class="fw-bold">{{ computer.current_user or '-' }}</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<div class="text-muted small">IP</div>
<div class="fw-bold">{{ computer.current_ip or '-' }}</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<div class="text-muted small">OS</div>
<div class="fw-bold">{{ computer.os_info or '-' }}</div>
</div>
</div>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">CPU, %</h5>
<canvas id="cpuChart"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">RAM, %</h5>
<canvas id="ramChart"></canvas>
</div>
</div>
</div>
</div>
<div class="card shadow-sm mb-4">
<div class="card-body">
<h5 class="card-title">Последние процессы</h5>
{% if heartbeats and heartbeats[-1].processes %}
<table class="table table-sm">
<thead><tr><th>PID</th><th>Имя</th><th>CPU%</th><th>RAM%</th></tr></thead>
<tbody>
{% for p in heartbeats[-1].processes[:10] %}
<tr>
<td>{{ p.pid }}</td>
<td>{{ p.name }}</td>
<td>{{ p.cpu_percent | round(1) }}</td>
<td>{{ p.ram_percent | round(1) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="text-muted">Нет данных о процессах.</div>
{% endif %}
</div>
</div>
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">История heartbeats</h5>
<table class="table table-sm">
<thead><tr><th>Время</th><th>CPU</th><th>RAM</th><th>IP</th></tr></thead>
<tbody>
{% for h in heartbeats[-20:] | reverse %}
<tr>
<td>{{ h.timestamp[:16] | replace('T', ' ') if h.timestamp else '-' }}</td>
<td>{{ h.cpu_percent | round(1) }}%</td>
<td>{{ h.ram_percent | round(1) }}%</td>
<td>{{ h.local_ip or '-' }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
const heartbeats = {{ heartbeats | tojson }};
const labels = heartbeats.map(h => h.timestamp.replace('T', ' ').slice(0, 16));
const cpuData = heartbeats.map(h => h.cpu_percent);
const ramData = heartbeats.map(h => h.ram_percent);
new Chart(document.getElementById('cpuChart'), {
type: 'line',
data: { labels, datasets: [{ label: 'CPU %', data: cpuData, borderColor: 'rgb(255, 99, 132)', tension: 0.2 }] },
options: { scales: { y: { beginAtZero: true, max: 100 } } }
});
new Chart(document.getElementById('ramChart'), {
type: 'line',
data: { labels, datasets: [{ label: 'RAM %', data: ramData, borderColor: 'rgb(54, 162, 235)', tension: 0.2 }] },
options: { scales: { y: { beginAtZero: true, max: 100 } } }
});
</script>
{% endblock %}
server/templates/dashboard.html
+126
View File
@@ -0,0 +1,126 @@
{% extends "base.html" %}
{% block title %}Дашборд — InfoUser Monitor{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Компьютеры</h2>
<div class="d-flex gap-2">
<a href="/api/computers/export/csv?{{ request.query_params }}" class="btn btn-outline-success btn-sm" target="_blank">
<i class="bi bi-download"></i> Экспорт CSV
</a>
<a href="/notifications" class="btn btn-outline-info btn-sm">
<i class="bi bi-bell"></i> Уведомления {% if unread_count %}<span class="badge bg-danger">{{ unread_count }}</span>{% endif %}
</a>
</div>
</div>
<form id="filter-form" class="row g-2 mb-4 p-3 bg-white rounded shadow-sm" method="get" action="/">
<div class="col-md-2">
<select name="status" class="form-select form-select-sm">
<option value="">Все статусы</option>
<option value="online" {% if filters.status == 'online' %}selected{% endif %}>Online</option>
<option value="offline" {% if filters.status == 'offline' %}selected{% endif %}>Offline</option>
</select>
</div>
<div class="col-md-2">
<input type="text" name="user" class="form-control form-control-sm" placeholder="Пользователь" value="{{ filters.user }}">
</div>
<div class="col-md-3">
<input type="text" name="search" class="form-control form-control-sm" placeholder="Поиск по хосту/IP/OS" value="{{ filters.search }}">
</div>
<div class="col-md-2">
<select name="sort" class="form-select form-select-sm">
<option value="hostname" {% if filters.sort == 'hostname' %}selected{% endif %}>Сортировка: хост</option>
<option value="last_seen" {% if filters.sort == 'last_seen' %}selected{% endif %}>Последний чек</option>
<option value="current_user" {% if filters.sort == 'current_user' %}selected{% endif %}>Пользователь</option>
<option value="status" {% if filters.sort == 'status' %}selected{% endif %}>Статус</option>
<option value="current_cpu_percent" {% if filters.sort == 'current_cpu_percent' %}selected{% endif %}>CPU</option>
<option value="current_ram_percent" {% if filters.sort == 'current_ram_percent' %}selected{% endif %}>RAM</option>
</select>
</div>
<div class="col-md-1">
<select name="order" class="form-select form-select-sm">
<option value="asc" {% if filters.order == 'asc' %}selected{% endif %}>Asc</option>
<option value="desc" {% if filters.order == 'desc' %}selected{% endif %}>Desc</option>
</select>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary btn-sm w-100">Применить</button>
</div>
</form>
<table class="table table-hover align-middle" id="computers-table">
<thead class="table-dark">
<tr>
<th>Хост</th>
<th>Пользователь</th>
<th>IP</th>
<th>Статус</th>
<th>CPU</th>
<th>RAM</th>
<th>OS</th>
<th>Последний чек</th>
<th></th>
</tr>
</thead>
<tbody>
{% for c in computers %}
<tr data-id="{{ c.id }}">
<td><strong>{{ c.hostname }}</strong></td>
<td>{{ c.current_user or '-' }}</td>
<td>{{ c.current_ip or '-' }}</td>
<td>
{% if c.status == 'online' %}
<span class="badge bg-success">Online</span>
{% else %}
<span class="badge bg-secondary">Offline</span>
{% endif %}
</td>
<td>{{ c.current_cpu_percent | round(1) if c.current_cpu_percent is not none else '-' }}%</td>
<td>{{ c.current_ram_percent | round(1) if c.current_ram_percent is not none else '-' }}%</td>
<td>{{ c.os_info or '-' }}</td>
<td class="last-seen">{% if c.last_seen %}{{ c.last_seen.strftime('%Y-%m-%d %H:%M') }}{% else %}-{% endif %}</td>
<td><a href="/computers/{{ c.id }}" class="btn btn-sm btn-outline-primary">Детали</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% if not computers %}
<div class="alert alert-info">Пока нет данных. Установите и запустите агент на клиентских ПК.</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
function currentQuery() {
return new URLSearchParams(window.location.search).toString();
}
async function loadDashboard() {
try {
const res = await fetch('/api/computers?' + currentQuery());
if (!res.ok) return location.reload();
const data = await res.json();
const tbody = document.querySelector('#computers-table tbody');
tbody.innerHTML = data.map(c => `
<tr data-id="${c.id}">
<td><strong>${escapeHtml(c.hostname)}</strong></td>
<td>${escapeHtml(c.current_user || '-')}</td>
<td>${escapeHtml(c.current_ip || '-')}</td>
<td>${c.status === 'online' ? '<span class="badge bg-success">Online</span>' : '<span class="badge bg-secondary">Offline</span>'}</td>
<td>${c.current_cpu_percent != null ? c.current_cpu_percent.toFixed(1) : '-'}%</td>
<td>${c.current_ram_percent != null ? c.current_ram_percent.toFixed(1) : '-'}%</td>
<td>${escapeHtml(c.os_info || '-')}</td>
<td class="last-seen">${c.last_seen ? c.last_seen.replace('T', ' ').slice(0, 16) : '-'}</td>
<td><a href="/computers/${c.id}" class="btn btn-sm btn-outline-primary">Детали</a></td>
</tr>
`).join('');
} catch (e) {
console.error('Dashboard refresh failed', e);
}
}
setInterval(loadDashboard, 60000);
</script>
{% endblock %}
server/templates/login.html
+59
View File
@@ -0,0 +1,59 @@
{% extends "base.html" %}
{% block title %}Вход — InfoUser Monitor{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card shadow">
<div class="card-body">
<h4 class="card-title text-center mb-4">InfoUser Monitor</h4>
<form id="login-form">
<div class="mb-3">
<label class="form-label">Логин</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="mb-3">
<label class="form-label">Пароль</label>
<input type="password" class="form-control" id="password" required>
</div>
<button type="submit" class="btn btn-primary w-100">Войти</button>
</form>
{% if error %}
<div class="alert alert-danger mt-3">{{ error }}</div>
{% endif %}
<div id="login-error" class="alert alert-danger mt-3 d-none"></div>
</div>
</div>
<div class="text-center mt-3 text-muted small">
По умолчанию: admin / admin
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('login-form').addEventListener('submit', async (e) => {
e.preventDefault();
const err = document.getElementById('login-error');
err.classList.add('d-none');
const form = new FormData();
form.append('username', document.getElementById('username').value);
form.append('password', document.getElementById('password').value);
try {
const res = await fetch('/api/auth/login', { method: 'POST', body: form });
if (res.ok) {
window.location.href = '/';
} else {
const data = await res.json();
err.textContent = data.detail || 'Ошибка входа';
err.classList.remove('d-none');
}
} catch (e) {
err.textContent = 'Сервер недоступен';
err.classList.remove('d-none');
}
});
</script>
{% endblock %}
server/templates/notifications.html
+52
View File
@@ -0,0 +1,52 @@
{% extends "base.html" %}
{% block title %}Уведомления — InfoUser Monitor{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Уведомления</h2>
<div class="d-flex gap-2">
<a href="/" class="btn btn-outline-secondary btn-sm">← Назад</a>
<button id="mark-all-read" class="btn btn-outline-primary btn-sm">Прочитать все</button>
</div>
</div>
<div id="notifications-list">
{% if notifications %}
{% for n in notifications %}
<div class="card mb-2 notification-card {% if not n.is_read %}border-start border-danger border-4{% endif %}" data-id="{{ n.id }}">
<div class="card-body d-flex justify-content-between align-items-start">
<div>
<h6 class="card-title mb-1">{{ n.title }}</h6>
<p class="card-text mb-1 text-muted small">{{ n.message }}</p>
<p class="card-text"><small class="text-muted">{{ n.sent_at.strftime('%Y-%m-%d %H:%M') if n.sent_at else '-' }}</small></p>
</div>
{% if not n.is_read %}
<button class="btn btn-sm btn-outline-success mark-read" data-id="{{ n.id }}">Прочитать</button>
{% endif %}
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-info">Уведомлений пока нет.</div>
{% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
async function markRead(id) {
const res = await fetch(`/api/notifications/${id}/read`, { method: 'POST' });
if (res.ok) location.reload();
}
document.querySelectorAll('.mark-read').forEach(btn => {
btn.addEventListener('click', () => markRead(btn.dataset.id));
});
document.getElementById('mark-all-read')?.addEventListener('click', async () => {
const res = await fetch('/api/notifications/read-all', { method: 'POST' });
if (res.ok) location.reload();
});
</script>
{% endblock %}