Update AppImage

AppImage/components/network-metrics.tsx

@@ -153,6 +153,7 @@ export function NetworkMetrics() {
 
   const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
   const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
+  const [interfaceTimeframe, setInterfaceTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
   const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
 
   const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
@@ -160,6 +161,15 @@ export function NetworkMetrics() {
     revalidateOnFocus: false,
   })
 
+  const { data: selectedInterfaceData, isLoading: interfaceDataLoading } = useSWR<any>(
+    selectedInterface ? `/api/network/${selectedInterface.name}/history?timeframe=${interfaceTimeframe}` : null,
+    fetcher,
+    {
+      refreshInterval: 30000,
+      revalidateOnFocus: false,
+    },
+  )
+
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -642,6 +652,22 @@ export function NetworkMetrics() {
 
           {selectedInterface && (
             <div className="space-y-6">
+              {/* Timeframe Selector */}
+              <div className="flex justify-end">
+                <Select value={interfaceTimeframe} onValueChange={(value: any) => setInterfaceTimeframe(value)}>
+                  <SelectTrigger className="w-[180px] bg-card border-border">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="hour">1 Hour</SelectItem>
+                    <SelectItem value="day">24 Hours</SelectItem>
+                    <SelectItem value="week">7 Days</SelectItem>
+                    <SelectItem value="month">30 Days</SelectItem>
+                    <SelectItem value="year">1 Year</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
               {/* Basic Information */}
               <div>
                 <h3 className="text-sm font-semibold text-muted-foreground mb-3">Basic Information</h3>
@@ -773,6 +799,39 @@ export function NetworkMetrics() {
                 </div>
               )}
 
+              {/* Network Traffic Chart */}
+              {selectedInterfaceData && (
+                <div>
+                  <h3 className="text-sm font-semibold text-muted-foreground mb-3">
+                    Network Traffic -{" "}
+                    {interfaceTimeframe === "hour"
+                      ? "1 Hour"
+                      : interfaceTimeframe === "day"
+                        ? "24 Hours"
+                        : interfaceTimeframe === "week"
+                          ? "7 Days"
+                          : interfaceTimeframe === "month"
+                            ? "30 Days"
+                            : "1 Year"}
+                  </h3>
+                  {interfaceDataLoading ? (
+                    <div className="text-center py-8 text-muted-foreground">
+                      <div className="text-sm">Loading historical data...</div>
+                    </div>
+                  ) : (
+                    <div className="rounded-lg border border-border/30 bg-background/50 p-4">
+                      <NetworkTrafficChart
+                        timeframe={interfaceTimeframe}
+                        interfaceName={selectedInterface.name}
+                        onTotalsCalculated={(totals) => {
+                          // Optional: update totals if needed
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+
               {/* Traffic Statistics */}
               <div>
                 <h3 className="text-sm font-semibold text-muted-foreground mb-3">Traffic since last boot</h3>

AppImage/components/network-traffic-chart.tsx

@@ -13,6 +13,7 @@ interface NetworkMetricsData {
 
 interface NetworkTrafficChartProps {
   timeframe: string
+  interfaceName?: string // Added optional interfaceName prop for specific interface data
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
 }
 
@@ -36,7 +37,7 @@ const CustomNetworkTooltip = ({ active, payload, label }: any) => {
   return null
 }
 
-export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTrafficChartProps) {
+export function NetworkTrafficChart({ timeframe, interfaceName, onTotalsCalculated }: NetworkTrafficChartProps) {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -47,7 +48,7 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
 
   useEffect(() => {
     fetchMetrics()
-  }, [timeframe])
+  }, [timeframe, interfaceName])
 
   const fetchMetrics = async () => {
     setLoading(true)
@@ -56,12 +57,15 @@ export function NetworkTrafficChart({ timeframe, onTotalsCalculated }: NetworkTr
     try {
       const baseUrl =
         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}/history?timeframe=${timeframe}`
+        : `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
 
       const response = await fetch(apiUrl)
 
       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()