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

2026-07-16 11:53:51 +07:00
commit cf2727da2b
31 changed files with 1957 additions and 0 deletions
@@ -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 %}