bivashy/Blitz-Proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Redesign dashboard to display detailed server stats

Browse Source
This commit is contained in:
Whispering Wind
2025-08-19 23:40:07 +03:30
committed by GitHub
parent b3595c691b
commit 738619b1e4
1 changed files with 120 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
core/scripts/webpanel/templates/index.html
View File

@ -15,63 +15,119 @@
<section class="content"> <section class="content">
<div class="container-fluid"> <div class="container-fluid">
<!-- Core System & Network Stats -->
<div class="row"> <div class="row">
<div class="col-lg-3 col-6"> <div class="col-md-3 col-sm-6 col-12">
<!-- small box --> <div class="info-box shadow-sm">
<div class="small-box bg-info"> <span class="info-box-icon bg-info"><i class="fas fa-microchip"></i></span>
<div class="inner"> <div class="info-box-content">
<h3 id="cpu-usage">--<sup style="font-size: 20px">%</sup></h3> <span class="info-box-text">CPU Usage</span>
<p>CPU Usage</p> <span class="info-box-number" id="cpu-usage">--</span>
</div>
<div class="icon">
<i class="fas fa-microchip"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-6"> <div class="col-md-3 col-sm-6 col-12">
<!-- small box --> <div class="info-box shadow-sm">
<div class="small-box bg-warning"> <span class="info-box-icon bg-warning"><i class="fas fa-memory"></i></span>
<div class="inner"> <div class="info-box-content">
<h3 id="ram-usage">--</h3> <span class="info-box-text">RAM Usage</span>
<p>RAM Usage</p> <span class="info-box-number" id="ram-usage">-- / --</span>
</div>
<div class="icon">
<i class="fas fa-memory"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-6"> <div class="col-md-3 col-sm-6 col-12">
<!-- small box --> <div class="info-box shadow-sm">
<div class="small-box bg-secondary"> <span class="info-box-icon bg-success"><i class="fas fa-users"></i></span>
<div class="inner"> <div class="info-box-content">
<h3 id="total-traffic">--</h3> <span class="info-box-text">Online Users</span>
<p>Total Traffic</p> <span class="info-box-number" id="online-users">--</span>
</div>
<div class="icon">
<i class="fas fa-network-wired"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-6"> <div class="col-md-3 col-sm-6 col-12">
<!-- small box --> <div class="info-box shadow-sm">
<div class="small-box bg-success"> <span class="info-box-icon bg-secondary"><i class="fas fa-clock"></i></span>
<div class="inner"> <div class="info-box-content">
<h3 id="online-users">--</h3> <span class="info-box-text">Uptime</span>
<p>Online Users</p> <span class="info-box-number" id="uptime">--</span>
</div> </div>
<div class="icon"> </div>
<i class="fas fa-users"></i> </div>
</div>
<div class="row">
<div class="col-md-6 col-12">
<div class="info-box shadow-sm">
<span class="info-box-icon bg-primary"><i class="fas fa-exchange-alt"></i></span>
<div class="info-box-content">
<span class="info-box-text">Download / Upload Speed</span>
<span class="info-box-number" id="network-speed">-- / --</span>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="info-box shadow-sm">
<span class="info-box-icon bg-dark"><i class="fas fa-project-diagram"></i></span>
<div class="info-box-content">
<span class="info-box-text">TCP / UDP Connections</span>
<span class="info-box-number" id="network-connections">-- / --</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Traffic Monitoring -->
<div class="row">
<div class="col-lg-6">
<div class="card card-outline card-danger">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-power-off mr-2"></i>Traffic Since Last Reboot</h3>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
<p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
<p class="text-lg" id="reboot-uploaded-traffic">--</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
<p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
<p class="text-lg" id="reboot-downloaded-traffic">--</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
<p class="text-lg" id="reboot-total-traffic">--</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-outline card-info">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-history mr-2"></i>User Traffic (All Time)</h3>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
<p class="text-lg text-success"><i class="fas fa-arrow-up mr-2"></i>Uploaded</p>
<p class="text-lg" id="user-uploaded-traffic">--</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom mb-3 pb-2">
<p class="text-lg text-primary"><i class="fas fa-arrow-down mr-2"></i>Downloaded</p>
<p class="text-lg" id="user-downloaded-traffic">--</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="text-lg text-info"><i class="fas fa-chart-line mr-2"></i>Combined</p>
<p class="text-lg" id="user-total-traffic">--</p>
</div>
</div>
</div>
</div>
</div>
<!-- Service Statuses -->
<div class="row"> <div class="row">
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<div class="small-box" id="hysteria2-status-box"> <div class="small-box" id="hysteria2-status-box">
<div class="inner"> <div class="inner">
<h3 id="hysteria2-status">--</h3> <h3 id="hysteria2-status">--</h3>
<p>Hysteria2</p> <p>Hysteria2 Core</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="fas fa-bolt"></i> <i class="fas fa-bolt"></i>
@ -93,10 +149,10 @@
<div class="small-box" id="iplimit-status-box"> <div class="small-box" id="iplimit-status-box">
<div class="inner"> <div class="inner">
<h3 id="iplimit-status">--</h3> <h3 id="iplimit-status">--</h3>
<p>IP Limit</p> <p>IP Limit Service</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="fas fa-box"></i> <i class="fas fa-ban"></i>
</div> </div>
</div> </div>
</div> </div>
@ -104,7 +160,7 @@
<div class="small-box" id="normalsub-status-box"> <div class="small-box" id="normalsub-status-box">
<div class="inner"> <div class="inner">
<h3 id="normalsub-status">--</h3> <h3 id="normalsub-status">--</h3>
<p>Normal Subscription</p> <p>Subscription Service</p>
</div> </div>
<div class="icon"> <div class="icon">
<i class="fas fa-rss"></i> <i class="fas fa-rss"></i>
@ -122,21 +178,34 @@
fetch('{{ url_for("server_status_api") }}') fetch('{{ url_for("server_status_api") }}')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
// Core Stats
document.getElementById('cpu-usage').textContent = data.cpu_usage; document.getElementById('cpu-usage').textContent = data.cpu_usage;
document.getElementById('ram-usage').textContent = data.ram_usage; document.getElementById('ram-usage').textContent = `${data.ram_usage} / ${data.total_ram}`;
document.getElementById('online-users').textContent = data.online_users; document.getElementById('online-users').textContent = data.online_users;
document.getElementById('total-traffic').textContent = data.total_traffic; document.getElementById('uptime').textContent = data.uptime;
// Network Stats
document.getElementById('network-speed').innerHTML = `🔽 ${data.download_speed} / 🔼 ${data.upload_speed}`;
document.getElementById('network-connections').textContent = `${data.tcp_connections} / ${data.udp_connections}`;
// Traffic Since Reboot
document.getElementById('reboot-uploaded-traffic').textContent = data.reboot_uploaded_traffic;
document.getElementById('reboot-downloaded-traffic').textContent = data.reboot_downloaded_traffic;
document.getElementById('reboot-total-traffic').textContent = data.reboot_total_traffic;
// User Traffic (All Time)
document.getElementById('user-uploaded-traffic').textContent = data.user_uploaded_traffic;
document.getElementById('user-downloaded-traffic').textContent = data.user_downloaded_traffic;
document.getElementById('user-total-traffic').textContent = data.user_total_traffic;
}) })
.catch(error => console.error('Error fetching server info:', error)); .catch(error => console.error('Error fetching server info:', error));
} }
function updateServiceStatuses() { function updateServiceStatuses() {
// Add services api in fetch
fetch('{{ url_for("server_services_status_api") }}') fetch('{{ url_for("server_services_status_api") }}')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
updateServiceBox('hysteria2', data.hysteria_server); updateServiceBox('hysteria2', data.hysteria_server);
updateServiceBox('telegrambot', data.hysteria_telegram_bot); updateServiceBox('telegrambot', data.hysteria_telegram_bot);
updateServiceBox('iplimit', data.hysteria_iplimit); updateServiceBox('iplimit', data.hysteria_iplimit);
@ -152,20 +221,19 @@
if (status === true) { if (status === true) {
statusElement.textContent = 'Active'; statusElement.textContent = 'Active';
statusBox.classList.remove('bg-danger'); statusBox.classList.remove('bg-danger');
statusBox.classList.add('bg-success'); // Add green statusBox.classList.add('bg-success');
} else { } else {
statusElement.textContent = 'Inactive'; statusElement.textContent = 'Inactive';
statusBox.classList.remove('bg-success'); statusBox.classList.remove('bg-success');
statusBox.classList.add('bg-danger'); // Add red statusBox.classList.add('bg-danger');
} }
} }
document.addEventListener('DOMContentLoaded', function () {
updateServerInfo(); updateServerInfo();
updateServiceStatuses(); updateServiceStatuses();
setInterval(updateServerInfo, 2000);
setInterval(updateServerInfo, 5000); setInterval(updateServiceStatuses, 10000);
});
</script> </script>
{% endblock %} {% endblock %}