diff --git a/AppImage/app/network/[id]/page.tsx b/AppImage/app/network/[id]/page.tsx deleted file mode 100644 index 8da6e11..0000000 --- a/AppImage/app/network/[id]/page.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" -import { NetworkTrafficChart } from "@/components/charts/network-traffic-chart" - -const Page = ({ params }) => { - const { id } = params - const timeframe = "1h" // Example value, you may need to adjust this based on your application logic - - return ( -
- {/* Other components or code here */} - - - - Network Traffic - - - - - - - {/* Other components or code here */} -
- ) -} - -export default Page diff --git a/AppImage/app/node/[id]/page.tsx b/AppImage/app/node/[id]/page.tsx deleted file mode 100644 index 7840885..0000000 --- a/AppImage/app/node/[id]/page.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" -import NetworkTrafficChart from "@/components/NetworkTrafficChart" // Ensure this path is correct - -const timeframe = "1h" // Declare timeframe variable -const handleTotalsCalculated = (totals) => { - console.log("Totals calculated:", totals) -} // Declare handleTotalsCalculated function - -export default function Page({ id }) { - return ( - <> - {/* ... other code here ... */} - - - Network Traffic - - - - - - {/* ... rest of code here ... */} - - ) -} diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx index 6c70978..34d9a34 100644 --- a/AppImage/components/network-traffic-chart.tsx +++ b/AppImage/components/network-traffic-chart.tsx @@ -15,6 +15,7 @@ interface NetworkTrafficChartProps { timeframe: string interfaceName?: string onTotalsCalculated?: (totals: { received: number; sent: number }) => void + refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos) } const CustomNetworkTooltip = ({ active, payload, label }: any) => { @@ -37,7 +38,12 @@ const CustomNetworkTooltip = ({ active, payload, label }: any) => { return null } -export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculated }: NetworkTrafficChartProps) => { +export function NetworkTrafficChart({ + timeframe, + interfaceName, + onTotalsCalculated, + refreshInterval = 60000, +}: NetworkTrafficChartProps) { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) @@ -48,116 +54,125 @@ export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculat }) useEffect(() => { - const fetchMetrics = async () => { - if (isInitialLoad) { - setLoading(true) - } - setError(null) - - try { - const baseUrl = - typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - - const apiUrl = interfaceName - ? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}` - : `${baseUrl}/api/node/metrics?timeframe=${timeframe}` - - const response = await fetch(apiUrl) - - if (!response.ok) { - throw new Error(`Failed to fetch network metrics: ${response.status}`) - } - - const result = await response.json() - - if (!result.data || !Array.isArray(result.data)) { - throw new Error("Invalid data format received from server") - } - - if (result.data.length === 0) { - setData([]) - setLoading(false) - return - } - - const transformedData = result.data.map((item: any, index: number) => { - const date = new Date(item.time * 1000) - let timeLabel = "" - - if (timeframe === "hour") { - timeLabel = date.toLocaleString("en-US", { - hour: "2-digit", - minute: "2-digit", - hour12: false, - }) - } else if (timeframe === "day") { - timeLabel = date.toLocaleString("en-US", { - hour: "2-digit", - minute: "2-digit", - hour12: false, - }) - } else if (timeframe === "week") { - timeLabel = date.toLocaleString("en-US", { - month: "short", - day: "numeric", - hour: "2-digit", - hour12: false, - }) - } else if (timeframe === "year") { - timeLabel = date.toLocaleString("en-US", { - month: "short", - day: "numeric", - year: "numeric", - }) - } else { - timeLabel = date.toLocaleString("en-US", { - month: "short", - day: "numeric", - }) - } - - let intervalSeconds = 60 - if (index > 0) { - intervalSeconds = item.time - result.data[index - 1].time - } - - const netInBytes = (item.netin || 0) * intervalSeconds - const netOutBytes = (item.netout || 0) * intervalSeconds - - return { - time: timeLabel, - timestamp: item.time, - netIn: Number((netInBytes / 1024 / 1024 / 1024).toFixed(4)), - netOut: Number((netOutBytes / 1024 / 1024 / 1024).toFixed(4)), - } - }) - - setData(transformedData) - - const totalReceived = transformedData.reduce((sum: number, item: NetworkMetricsData) => sum + item.netIn, 0) - const totalSent = transformedData.reduce((sum: number, item: NetworkMetricsData) => sum + item.netOut, 0) - - if (onTotalsCalculated) { - onTotalsCalculated({ received: totalReceived, sent: totalSent }) - } - - if (isInitialLoad) { - setIsInitialLoad(false) - } - } catch (err: any) { - console.error("Error fetching network metrics:", err) - setError(err.message || "Error loading metrics") - } finally { - setLoading(false) - } - } - + setIsInitialLoad(true) fetchMetrics() + }, [timeframe, interfaceName]) - const interval = setInterval(fetchMetrics, 60000) + useEffect(() => { + if (refreshInterval > 0) { + const interval = setInterval(() => { + fetchMetrics() + }, refreshInterval) - return () => clearInterval(interval) - }, [timeframe, interfaceName, isInitialLoad, onTotalsCalculated]) + return () => clearInterval(interval) + } + }, [timeframe, interfaceName, refreshInterval]) + + const fetchMetrics = async () => { + if (isInitialLoad) { + setLoading(true) + } + setError(null) + + try { + const baseUrl = + typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" + + 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) + + if (!response.ok) { + throw new Error(`Failed to fetch network metrics: ${response.status}`) + } + + const result = await response.json() + + if (!result.data || !Array.isArray(result.data)) { + throw new Error("Invalid data format received from server") + } + + if (result.data.length === 0) { + setData([]) + setLoading(false) + return + } + + const transformedData = result.data.map((item: any, index: number) => { + const date = new Date(item.time * 1000) + let timeLabel = "" + + if (timeframe === "hour") { + timeLabel = date.toLocaleString("en-US", { + hour: "2-digit", + minute: "2-digit", + hour12: false, + }) + } else if (timeframe === "day") { + timeLabel = date.toLocaleString("en-US", { + hour: "2-digit", + minute: "2-digit", + hour12: false, + }) + } else if (timeframe === "week") { + timeLabel = date.toLocaleString("en-US", { + month: "short", + day: "numeric", + hour: "2-digit", + hour12: false, + }) + } else if (timeframe === "year") { + timeLabel = date.toLocaleString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }) + } else { + timeLabel = date.toLocaleString("en-US", { + month: "short", + day: "numeric", + }) + } + + let intervalSeconds = 60 + if (index > 0) { + intervalSeconds = item.time - result.data[index - 1].time + } + + const netInBytes = (item.netin || 0) * intervalSeconds + const netOutBytes = (item.netout || 0) * intervalSeconds + + return { + time: timeLabel, + timestamp: item.time, + netIn: Number((netInBytes / 1024 / 1024 / 1024).toFixed(4)), + netOut: Number((netOutBytes / 1024 / 1024 / 1024).toFixed(4)), + } + }) + + setData(transformedData) + + const totalReceived = transformedData.reduce((sum: number, item: NetworkMetricsData) => sum + item.netIn, 0) + const totalSent = transformedData.reduce((sum: number, item: NetworkMetricsData) => sum + item.netOut, 0) + + if (onTotalsCalculated) { + onTotalsCalculated({ received: totalReceived, sent: totalSent }) + } + + if (isInitialLoad) { + setIsInitialLoad(false) + } + } catch (err: any) { + console.error("[v0] Error fetching network metrics:", err) + setError(err.message || "Error loading metrics") + } finally { + setLoading(false) + } + } const tickInterval = Math.ceil(data.length / 8)