mirror of
https://github.com/eduardogsilva/routerfleet.git
synced 2025-08-05 18:54:42 +02:00
321 lines
No EOL
13 KiB
HTML
321 lines
No EOL
13 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.info-box {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.info-box:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
</style>
|
|
<div class="row">
|
|
<!-- Left Column for General Information -->
|
|
<div class="col-lg-12">
|
|
<!-- System Stats Card -->
|
|
<div class="card card-primary card-outline">
|
|
{% if page_title %}
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-tachometer-alt"></i> {{ page_title }}
|
|
</h3>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<!-- Used Storage -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-info">
|
|
<span class="info-box-icon"><i class="fas fa-hdd"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Used Storage (binary and rsc backups)</span>
|
|
<span class="info-box-number">{{ media_root_stats.used }} used</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: {{ media_root_stats.usage_percentage }}%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
{{ media_root_stats.usage_percentage }}% of {{ media_root_stats.total }}
|
|
{% if media_root_stats.storage_warning %}
|
|
<span class="text-danger">{{ media_root_stats.storage_warning }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup Queue -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-warning">
|
|
<span class="info-box-icon"><i class="fas fa-tasks"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Backup Queue</span>
|
|
<span class="info-box-number">{{ queue }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Successful Backups -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-success">
|
|
<span class="info-box-icon"><i class="fas fa-check-circle"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Successful Backups (24h)</span>
|
|
<span class="info-box-number">{{ success_backup_last_24h }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Failed Backups -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-danger">
|
|
<span class="info-box-icon"><i class="fas fa-times-circle"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Failed Backups (24h)</span>
|
|
<span class="info-box-number">{{ error_backup_last_24h }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
|
|
<!-- Total Routers -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-primary">
|
|
<span class="info-box-icon"><i class="fas fa-network-wired"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Total Routers</span>
|
|
<span class="info-box-number">{{ total_router_count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Online Routers -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-success">
|
|
<span class="info-box-icon"><i class="fas fa-plug"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Online Routers</span>
|
|
<span class="info-box-number">{{ router_online_count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offline Routers -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-danger">
|
|
<span class="info-box-icon"><i class="fas fa-plug"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Offline Routers</span>
|
|
<span class="info-box-number">{{ router_offline_count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Disabled Routers -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-danger">
|
|
<span class="info-box-icon"><i class="fas fa-times"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Disabled Routers</span>
|
|
<span class="info-box-number">{{ router_disabled_count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<!-- Not Monitored Routers -->
|
|
<div class="col-md-3">
|
|
<div class="info-box bg-secondary">
|
|
<span class="info-box-icon"><i class="fas fa-question-circle"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Not Monitored Routers</span>
|
|
<span class="info-box-number">{{ router_not_monitored_count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- /.card-body -->
|
|
</div> <!-- /.card -->
|
|
</div> <!-- /.col-lg-12 -->
|
|
</div> <!-- /.row -->
|
|
|
|
|
|
<!-- Right Column for Charts -->
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<!-- Backup Status Chart -->
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><i class="fas fa-chart-bar"></i> Backup Status Statistics</h3>
|
|
<div class="card-tools">
|
|
<select id="days-select-backup" class="form-control">
|
|
<option value="7">Last 7 days</option>
|
|
<option value="3">Last 3 days</option>
|
|
<option value="5">Last 5 days</option>
|
|
<option value="10">Last 10 days</option>
|
|
<option value="15">Last 15 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="backupChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<!-- Router Status Chart -->
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-header">
|
|
<h3 class="card-title"><i class="fas fa-signal"></i> Router Status Statistics</h3>
|
|
<div class="card-tools">
|
|
<select id="days-select-status" class="form-control">
|
|
<option value="7">Last 7 days</option>
|
|
<option value="3">Last 3 days</option>
|
|
<option value="5">Last 5 days</option>
|
|
<option value="10">Last 10 days</option>
|
|
<option value="15">Last 15 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="routerStatusChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
var backupChart;
|
|
|
|
function createBackupChart(data) {
|
|
var ctx = document.getElementById('backupChart').getContext('2d');
|
|
if (backupChart) {
|
|
backupChart.destroy();
|
|
}
|
|
backupChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.dates,
|
|
datasets: [{
|
|
label: 'Successful Backups',
|
|
data: data.success_data,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 2,
|
|
fill: true, // Fill the area under the line
|
|
},
|
|
{
|
|
label: 'Failed Backups',
|
|
data: data.error_data,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 2,
|
|
fill: true, // Fill the area under the line
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function updateBackupStatistics(days) {
|
|
fetch(`/backup_statistics_data?days=${days}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Invalid days parameter');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
createBackupChart(data);
|
|
})
|
|
.catch(error => {
|
|
alert(error.message);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const daysSelectBackup = document.getElementById('days-select-backup');
|
|
daysSelectBackup.addEventListener('change', (event) => {
|
|
updateBackupStatistics(event.target.value);
|
|
});
|
|
|
|
updateBackupStatistics(7); // Initial load for the last 7 days
|
|
});
|
|
</script>
|
|
<script>
|
|
var routerStatusChart;
|
|
function createRouterStatusChart(data) {
|
|
var ctx2 = document.getElementById('routerStatusChart').getContext('2d');
|
|
if (routerStatusChart) {
|
|
routerStatusChart.destroy();
|
|
}
|
|
routerStatusChart = new Chart(ctx2, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.dates,
|
|
datasets: [{
|
|
label: 'Online Routers',
|
|
data: data.online_data,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 2,
|
|
fill: true, // Fill the area under the line
|
|
},
|
|
{
|
|
label: 'Offline Routers',
|
|
data: data.offline_data,
|
|
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
|
borderColor: 'rgba(153, 102, 255, 1)',
|
|
borderWidth: 2,
|
|
fill: true, // Fill the area under the line
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateRouterStatus(days) {
|
|
fetch(`/router_status_data?days=${days}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Invalid days parameter'+ " " + days);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
createRouterStatusChart(data);
|
|
})
|
|
.catch(error => {
|
|
alert(error.message);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const daysSelectStatus = document.getElementById('days-select-status');
|
|
daysSelectStatus.addEventListener('change', (event) => {
|
|
updateRouterStatus(event.target.value);
|
|
});
|
|
|
|
updateRouterStatus(7); // Initial load for the last 7 days
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock %} |