128 lines
4.4 KiB
HTML
128 lines
4.4 KiB
HTML
{% 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 %}
|