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-traffic-chart.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-25 21:04:21 +02:00
parent 73181f9e33
commit bcce1b7ea8
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
AppImage/components/network-traffic-chart.tsx
View File

@@ -13,6 +13,7 @@ interface NetworkMetricsData {
interface NetworkTrafficChartProps { interface NetworkTrafficChartProps {
timeframe: string timeframe: string
interfaceName?: string
onTotalsCalculated?: (totals: { received: number; sent: number }) => void onTotalsCalculated?: (totals: { received: number; sent: number }) => void
} }
@@ -36,7 +37,7 @@ const CustomNetworkTooltip = ({ active, payload, label }: any) => {
return null return null
} }
export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTrafficChartProps) { export function NetworkTrafficChart({ timeframe, interfaceName, onTotalsCalculated }: NetworkTrafficChartProps) {
const [data, setData] = useState<NetworkMetricsData[]>([]) const [data, setData] = useState<NetworkMetricsData[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
@@ -47,7 +48,7 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
useEffect(() => { useEffect(() => {
fetchMetrics() fetchMetrics()
}, [timeframe]) }, [timeframe, interfaceName])
const fetchMetrics = async () => { const fetchMetrics = async () => {
setLoading(true) setLoading(true)
@@ -56,12 +57,17 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
try { try {
const baseUrl = const baseUrl =
typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : ""
const apiUrl = `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
const apiUrl = interfaceName
? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}`
: `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
console.log("[v0] Fetching network metrics from:", apiUrl)
const response = await fetch(apiUrl) const response = await fetch(apiUrl)
if (!response.ok) { if (!response.ok) {
throw new Error(`Failed to fetch node metrics: ${response.status}`) throw new Error(`Failed to fetch network metrics: ${response.status}`)
} }
const result = await response.json() const result = await response.json()
@@ -76,7 +82,6 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
return return
} }
// RRD data contains rate (bytes/second), we need to calculate traffic per interval
const transformedData = result.data.map((item: any, index: number) => { const transformedData = result.data.map((item: any, index: number) => {
const date = new Date(item.time * 1000) const date = new Date(item.time * 1000)
let timeLabel = "" let timeLabel = ""
@@ -113,14 +118,11 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
}) })
} }
// Calculate time interval between data points (in seconds) let intervalSeconds = 60
let intervalSeconds = 60 // Default to 1 minute
if (index > 0) { if (index > 0) {
intervalSeconds = item.time - result.data[index - 1].time intervalSeconds = item.time - result.data[index - 1].time
} }
// Convert rate (bytes/second) to traffic in this interval (GB)
// netin and netout are in bytes/second, multiply by interval to get total bytes
const netInBytes = (item.netin || 0) * intervalSeconds const netInBytes = (item.netin || 0) * intervalSeconds
const netOutBytes = (item.netout || 0) * intervalSeconds const netOutBytes = (item.netout || 0) * intervalSeconds