Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-10-26 15:36:53 +01:00
parent 96046a5d1f
commit f6869b9e1c
2 changed files with 135 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
AppImage/components/network-metrics.tsx
View File

@@ -168,6 +168,14 @@ export function NetworkMetrics() {
revalidateOnFocus: false,
})
const { data: interfaceTotalsData } = useSWR<{
timeframe: string
interfaces: Record<string, { received: number; sent: number }>
}>(`/api/network/interfaces/totals?timeframe=${timeframe}`, fetcher, {
refreshInterval: 60000,
revalidateOnFocus: false,
})
if (isLoading) {
return (
<div className="space-y-6">
@@ -398,6 +406,7 @@ export function NetworkMetrics() {
<div className="space-y-4">
{networkData.physical_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name]
return (
<div
@@ -444,11 +453,25 @@ export function NetworkMetrics() {
</div>
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic since last boot</div>
<div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
{interfaceTotals ? (
<>
<span className="text-green-500">
↓ {formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)}
</span>
{" / "}
<span className="text-blue-500">
↑ {formatStorage(interfaceTotals.sent * 1024 * 1024 * 1024)}
</span>
</>
) : (
<>
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</>
)}
</div>
</div>
@@ -483,6 +506,7 @@ export function NetworkMetrics() {
<div className="space-y-4">
{networkData.bridge_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name]
return (
<div
@@ -557,11 +581,25 @@ export function NetworkMetrics() {
</div>
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic since last boot</div>
<div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
{interfaceTotals ? (
<>
<span className="text-green-500">
↓ {formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)}
</span>
{" / "}
<span className="text-blue-500">
↑ {formatStorage(interfaceTotals.sent * 1024 * 1024 * 1024)}
</span>
</>
) : (
<>
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</>
)}
</div>
</div>