xtcnet/D3V-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: WireGuard client filter, feat: system monitor storage and total ram

Browse source
This commit is contained in:
xtcnet 2026-03-08 20:49:00 +07:00
parent e48fef3154
commit 497482aef3
3 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
backend/routes/reports.js
View file

@ -41,18 +41,29 @@ router
.all(jwtdecode())
.get(async (req, res, next) => {
try {
const [cpuTotal, memData, networkStats] = await Promise.all([
const [cpuTotal, memData, networkStats, fsData] = await Promise.all([
si.currentLoad(),
si.mem(),
si.networkStats("*"),
si.fsSize()
]);
// Grab eth0 or the first active interface
const activeNet = networkStats.find(n => n.operstate === 'up' && n.iface !== 'lo') || networkStats[0] || {};
// Summarize all detected physical drives to find total storage and used storage
const totalStorage = fsData.reduce((acc, disk) => acc + (disk.size || 0), 0);
const usedStorage = fsData.reduce((acc, disk) => acc + (disk.used || 0), 0);
const storagePercent = totalStorage > 0 ? Math.round((usedStorage / totalStorage) * 100) : 0;
res.status(200).json({
cpu: Math.round(cpuTotal.currentLoad),
memory: Math.round((memData.active / memData.total) * 100),
memoryTotal: memData.total,
memoryActive: memData.active,
storage: storagePercent,
storageTotal: totalStorage,
storageUsed: usedStorage,
networkRx: (activeNet.rx_sec / 1024 / 1024 * 8).toFixed(2), // Mbps
networkTx: (activeNet.tx_sec / 1024 / 1024 * 8).toFixed(2), // Mbps
});

18
frontend/src/components/SiteFooter.tsx
View file

@ -1,11 +1,16 @@
import { useEffect, useState } from "react";
import { IconCpu, IconServer, IconArrowsDownUp } from "@tabler/icons-react";
import { IconCpu, IconServer, IconArrowsDownUp, IconDatabase } from "@tabler/icons-react";
import * as api from "../api/backend/base";
export function SiteFooter() {
const [sysStats, setSysStats] = useState({
cpu: 0,
memory: 0,
memoryTotal: 0,
memoryActive: 0,
storage: 0,
storageTotal: 0,
storageUsed: 0,
networkRx: "0.00",
networkTx: "0.00"
});
@ -35,6 +40,9 @@ export function SiteFooter() {
};
}, []);
// Convert bytes to GB string
const formatGB = (bytes: number) => (bytes / 1024 / 1024 / 1024).toFixed(1);
return (
<footer className="footer d-print-none py-3">
<div className="container-xl">
@ -44,9 +52,13 @@ export function SiteFooter() {
<IconCpu size={16} />
<span>{sysStats.cpu}%</span>
</div>
<div title="Memory Usage" className="d-flex align-items-center gap-1">
<div title={`Memory Usage (${formatGB(sysStats.memoryActive)}GB / ${formatGB(sysStats.memoryTotal)}GB)`} className="d-flex align-items-center gap-1">
<IconServer size={16} />
<span>{sysStats.memory}%</span>
<span>{sysStats.memory}% of {Math.round(sysStats.memoryTotal / 1024 / 1024 / 1024)}GB</span>
</div>
<div title={`Storage Usage (${formatGB(sysStats.storageUsed)}GB / ${formatGB(sysStats.storageTotal)}GB)`} className="d-flex align-items-center gap-1">
<IconDatabase size={16} />
<span>Free {formatGB(sysStats.storageTotal - sysStats.storageUsed)}GB</span>
</div>
<div title="Network Bandwidth" className="d-flex align-items-center gap-1">
<IconArrowsDownUp size={16} />

2
frontend/src/pages/WireGuard/index.tsx
View file

@ -80,7 +80,7 @@ function WireGuard() {
const filteredClients = clients?.filter((c: any) => {
// Filter by selected server
const cInterfaceId = c.interfaceId || c.interface_id;
if (selectedServerId !== "all" && cInterfaceId !== selectedServerId) {
if (selectedServerId !== "all" && Number(cInterfaceId) !== selectedServerId) {
return false;
}
// Filter by search text