fix: logging
This commit is contained in:
+71
-15
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -17,6 +18,7 @@
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #2e2e2e;
|
||||
@@ -30,13 +32,16 @@
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed h2,
|
||||
.sidebar.collapsed ul li a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
color: #3399FF;
|
||||
text-align: center;
|
||||
@@ -44,13 +49,16 @@
|
||||
font-size: 24px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
@@ -59,16 +67,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
color: #3399FF;
|
||||
}
|
||||
|
||||
.sidebar ul li a i {
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar ul li a span {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
@@ -81,6 +93,7 @@
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
@@ -91,42 +104,50 @@
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container.collapsed {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3399FF;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #2e2e2e;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.screenshots {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.screenshots img {
|
||||
max-height: 200px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #3399FF;
|
||||
}
|
||||
|
||||
.logs {
|
||||
background-color: #2e2e2e;
|
||||
padding: 15px;
|
||||
@@ -137,10 +158,11 @@
|
||||
font-size: 14px;
|
||||
color: #3399FF;
|
||||
}
|
||||
|
||||
.logs p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-marker-icon {
|
||||
background-color: #3399FF;
|
||||
border: 2px solid #ffffff;
|
||||
@@ -149,10 +171,12 @@
|
||||
height: 20px !important;
|
||||
box-shadow: 0 0 10px rgba(51, 153, 255, 0.5);
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
color: #1e1e1e;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
@@ -160,6 +184,7 @@
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Боковое меню -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
@@ -196,7 +221,19 @@
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Состояние парсеров</h2>
|
||||
<canvas id="parsersStatusChart"></canvas>
|
||||
<div class="parsers-status">
|
||||
<p>TG Node 0:
|
||||
<span class="status-{% if parser_status['tg-node-0'] %}active{% else %}error{% endif %}">
|
||||
{% if parser_status['tg-node-0'] %}Активен{% else %}Ошибка{% endif %}
|
||||
</span>
|
||||
</p>
|
||||
<p>TG Node 1:
|
||||
<span class="status-{% if parser_status['tg-node-1'] %}active{% else %}error{% endif %}">
|
||||
{% if parser_status['tg-node-1'] %}Активен{% else %}Ошибка{% endif %}
|
||||
</span>
|
||||
</p>
|
||||
<canvas id="parsersStatusChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Источники утечек</h2>
|
||||
@@ -229,19 +266,26 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script>
|
||||
// График утечек за месяц
|
||||
const monthlyLeaksCtx = document.getElementById('monthlyLeaksChart').getContext('2d');
|
||||
new Chart(monthlyLeaksCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
|
||||
labels: [
|
||||
{% for day in leaks_stats['leaks_by_day'] %}
|
||||
"{{ day[0].strftime('%d.%m') }}"{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
datasets: [{
|
||||
label: 'Утечки',
|
||||
data: [12, 19, 3, 5, 2, 3, 15, 20, 10, 8, 12, 14, 18, 20, 22],
|
||||
data: [
|
||||
{% for day in leaks_stats['leaks_by_day'] %}
|
||||
{{ day[1] }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
borderColor: '#3399FF',
|
||||
tension: 0.1,
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(51, 153, 255, 0.1)',
|
||||
backgroundColor: 'rgba(51, 153, 255, 0.1)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@@ -249,7 +293,7 @@
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#fff',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -257,24 +301,23 @@
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: '#444',
|
||||
color: '#444'
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: '#444',
|
||||
color: '#444'
|
||||
},
|
||||
ticks: {
|
||||
color: '#fff',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// График состояния парсеров
|
||||
const parsersStatusCtx = document.getElementById('parsersStatusChart').getContext('2d');
|
||||
new Chart(parsersStatusCtx, {
|
||||
@@ -283,7 +326,11 @@
|
||||
labels: ['Активны', 'Ошибки', 'Неактивны'],
|
||||
datasets: [{
|
||||
label: 'Состояние',
|
||||
data: [8, 1, 1],
|
||||
data: [
|
||||
{{ parser_status['active'] }},
|
||||
{{ parser_status['errors'] }},
|
||||
0 // Неактивных нет в текущей логике
|
||||
],
|
||||
backgroundColor: ['#3399FF', '#ff4444', '#666666'],
|
||||
}]
|
||||
},
|
||||
@@ -304,10 +351,18 @@
|
||||
new Chart(sourcesCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Форумы', 'Даркнет', 'Telegram'],
|
||||
labels: [
|
||||
{% for source in leaks_stats['leaks_by_source'] %}
|
||||
'{{ source[0] }}'{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
datasets: [{
|
||||
label: 'Количество утечек',
|
||||
data: [45, 30, 25],
|
||||
data: [
|
||||
{% for source in leaks_stats['leaks_by_source'] %}
|
||||
{{ source[1] }}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
backgroundColor: ['#3399FF', '#00cc99', '#0099cc'],
|
||||
}]
|
||||
},
|
||||
@@ -365,4 +420,5 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -218,15 +218,13 @@
|
||||
|
||||
<!-- Контейнер для логов -->
|
||||
<div class="logs-container">
|
||||
<h2>Логи системы</h2>
|
||||
<div class="logs">
|
||||
<p>[2023-10-01 12:34] Парсер форума запущен.</p>
|
||||
<p>[2023-10-01 12:35] Найдена новая утечка на форуме X.</p>
|
||||
<p>[2023-10-01 12:36] Ошибка парсера Telegram: timeout.</p>
|
||||
<p>[2023-10-01 12:37] Утечка данных в Москве зафиксирована.</p>
|
||||
<p>[2023-10-01 12:38] Парсер даркнета завершил работу.</p>
|
||||
<p>[2023-10-01 12:39] Новый скриншот добавлен в базу.</p>
|
||||
<!-- Добавьте больше логов по необходимости -->
|
||||
<h2>Логи системы (tg_nodes.log)</h2>
|
||||
<div class="logs" id="logs-container">
|
||||
{% for log in logs %}
|
||||
<p>{{ log }}</p>
|
||||
{% else %}
|
||||
<p>Нет записей в логах</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user