Update AppImage

AppImage/app/network/[id]/page.tsx

@@ -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 (
-    <div>
-      {/* Other components or code here */}
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Network Traffic</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <NetworkTrafficChart timeframe={timeframe} interfaceName={id} refreshInterval={30000} />
-        </CardContent>
-      </Card>
-
-      {/* Other components or code here */}
-    </div>
-  )
-}
-
-export default Page

AppImage/app/node/[id]/page.tsx

@@ -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 ... */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Network Traffic</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <NetworkTrafficChart
-            timeframe={timeframe}
-            onTotalsCalculated={handleTotalsCalculated}
-            refreshInterval={30000}
-          />
-        </CardContent>
-      </Card>
-      {/* ... rest of code here ... */}
-    </>
-  )
-}

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<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -48,6 +54,20 @@ export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculat
   })
 
   useEffect(() => {
+    setIsInitialLoad(true)
+    fetchMetrics()
+  }, [timeframe, interfaceName])
+
+  useEffect(() => {
+    if (refreshInterval > 0) {
+      const interval = setInterval(() => {
+        fetchMetrics()
+      }, refreshInterval)
+
+      return () => clearInterval(interval)
+    }
+  }, [timeframe, interfaceName, refreshInterval])
+
   const fetchMetrics = async () => {
     if (isInitialLoad) {
       setLoading(true)
@@ -62,6 +82,8 @@ export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculat
         ? `${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) {
@@ -145,20 +167,13 @@ export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculat
         setIsInitialLoad(false)
       }
     } catch (err: any) {
-        console.error("Error fetching network metrics:", err)
+      console.error("[v0] Error fetching network metrics:", err)
       setError(err.message || "Error loading metrics")
     } finally {
       setLoading(false)
     }
   }
 
-    fetchMetrics()
-
-    const interval = setInterval(fetchMetrics, 60000)
-
-    return () => clearInterval(interval)
-  }, [timeframe, interfaceName, isInitialLoad, onTotalsCalculated])
-
   const tickInterval = Math.ceil(data.length / 8)
 
   const handleLegendClick = (dataKey: string) => {