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 network-metrics.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-26 16:17:23 +01:00
parent b47520c938
commit 13b9dd0262
1 changed files with 23 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -163,18 +163,13 @@ export function NetworkMetrics() {
revalidateOnReconnect: true, revalidateOnReconnect: true,
}) })
const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, { // const { data: interfaceTotalsData } = useSWR<{
refreshInterval: 30000, // timeframe: string
revalidateOnFocus: false, // interfaces: Record<string, { received: number; sent: number }>
}) // }>(`/api/network/interfaces/totals?timeframe=${timeframe}`, fetcher, {
// refreshInterval: 60000,
const { data: interfaceTotalsData } = useSWR<{ // revalidateOnFocus: false,
timeframe: string // })
interfaces: Record<string, { received: number; sent: number }>
}>(`/api/network/interfaces/totals?timeframe=${timeframe}`, fetcher, {
refreshInterval: 60000,
revalidateOnFocus: false,
})
if (isLoading) { if (isLoading) {
return ( return (
@@ -406,7 +401,7 @@ export function NetworkMetrics() {
<div className="space-y-4"> <div className="space-y-4">
{networkData.physical_interfaces.map((interface_, index) => { {networkData.physical_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type) const typeBadge = getInterfaceTypeBadge(interface_.type)
const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name] // const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name] // Removed
return ( return (
<div <div
@@ -455,23 +450,10 @@ export function NetworkMetrics() {
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div> <div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div>
<div className="font-medium text-foreground text-xs"> <div className="font-medium text-foreground text-xs">
{interfaceTotals ? ( {/* Removed timeframe-based data, will now show Traffic since last boot */}
<> <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
<span className="text-green-500"> {" / "}
↓ {formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)} <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</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>
</div> </div>
@@ -506,7 +488,7 @@ export function NetworkMetrics() {
<div className="space-y-4"> <div className="space-y-4">
{networkData.bridge_interfaces.map((interface_, index) => { {networkData.bridge_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type) const typeBadge = getInterfaceTypeBadge(interface_.type)
const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name] // const interfaceTotals = interfaceTotalsData?.interfaces?.[interface_.name] // Removed
return ( return (
<div <div
@@ -583,23 +565,10 @@ export function NetworkMetrics() {
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div> <div className="text-muted-foreground text-xs">Traffic ({getTimeframeLabel()})</div>
<div className="font-medium text-foreground text-xs"> <div className="font-medium text-foreground text-xs">
{interfaceTotals ? ( {/* Removed timeframe-based data, will now show Traffic since last boot */}
<> <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
<span className="text-green-500"> {" / "}
↓ {formatStorage(interfaceTotals.received * 1024 * 1024 * 1024)} <span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</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>
</div> </div>
@@ -748,12 +717,12 @@ export function NetworkMetrics() {
const displayInterface = currentInterfaceData || selectedInterface const displayInterface = currentInterfaceData || selectedInterface
console.log("[v0] Selected Interface:", selectedInterface.name) // console.log("[v0] Selected Interface:", selectedInterface.name)
console.log("[v0] Selected Interface bytes_recv:", selectedInterface.bytes_recv) // console.log("[v0] Selected Interface bytes_recv:", selectedInterface.bytes_recv)
console.log("[v0] Selected Interface bytes_sent:", selectedInterface.bytes_sent) // console.log("[v0] Selected Interface bytes_sent:", selectedInterface.bytes_sent)
console.log("[v0] Display Interface bytes_recv:", displayInterface.bytes_recv) // console.log("[v0] Display Interface bytes_recv:", displayInterface.bytes_recv)
console.log("[v0] Display Interface bytes_sent:", displayInterface.bytes_sent) // console.log("[v0] Display Interface bytes_sent:", displayInterface.bytes_sent)
console.log("[v0] Modal Network Data available:", !!modalNetworkData) // console.log("[v0] Modal Network Data available:", !!modalNetworkData)
return ( return (
<> <>