Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-10-24 21:54:34 +02:00
parent a8b8036311
commit 32036ef64d
2 changed files with 166 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,10 +4,9 @@ import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card" import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge" import { Badge } from "./ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
import { Wifi, Activity, Network, Router, AlertCircle, Zap, Info } from "lucide-react" import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
import useSWR from "swr" import useSWR from "swr"
import { NetworkTrafficChart } from "./network-traffic-chart" import { NetworkTrafficChart } from "./network-traffic-chart"
import { VMNetworkChart } from "./vm-lxc-network-chart"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
interface NetworkData { interface NetworkData {
@@ -155,15 +154,12 @@ export function NetworkMetrics() {
const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null) const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day") const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 }) const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
// REMOVED: const [vmLxcTraffic, setVmLxcTraffic] = useState<Record<number, { received: number; sent: number }>>({})
const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, { const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
refreshInterval: 30000, refreshInterval: 30000,
revalidateOnFocus: false, revalidateOnFocus: false,
}) })
// REMOVED: useEffect for VM/LXC traffic fetch
if (isLoading) { if (isLoading) {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -195,10 +191,8 @@ export function NetworkMetrics() {
) )
} }
// REMOVED: const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv * 1024 * 1024 * 1024) // Convert GB to bytes const trafficInFormatted = formatStorage(networkTotals.received * 1024 * 1024 * 1024) // Convert GB to bytes
// REMOVED: const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent * 1024 * 1024 * 1024) const trafficOutFormatted = formatStorage(networkTotals.sent * 1024 * 1024 * 1024)
const trafficInFormatted = formatStorage(networkData.traffic.bytes_recv)
const trafficOutFormatted = formatStorage(networkData.traffic.bytes_sent)
const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0" const packetsRecvK = networkData.traffic.packets_recv ? (networkData.traffic.packets_recv / 1000).toFixed(0) : "0"
const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0) const totalErrors = (networkData.traffic.errin || 0) + (networkData.traffic.errout || 0)
@@ -248,15 +242,11 @@ export function NetworkMetrics() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground hidden md:inline">Received:</span> <span className="text-sm text-muted-foreground hidden md:inline">Received:</span>
<span className="text-base lg:text-xl font-bold text-green-500"> <span className="text-base lg:text-xl font-bold text-green-500">↓ {trafficInFormatted}</span>
↓ {formatStorage(networkData.traffic.bytes_recv)}
</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground hidden md:inline">Sent:</span> <span className="text-sm text-muted-foreground hidden md:inline">Sent:</span>
<span className="text-base lg:text-xl font-bold text-blue-500"> <span className="text-base lg:text-xl font-bold text-blue-500">↑ {trafficOutFormatted}</span>
↑ {formatStorage(networkData.traffic.bytes_sent)}
</span>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@@ -353,113 +343,100 @@ export function NetworkMetrics() {
</CardContent> </CardContent>
</Card> </Card>
{/* VM & LXC Network Interfaces section */} {/* Physical Interfaces section */}
{networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && ( <Card className="bg-card border-border">
<Card className="bg-card border-border"> <CardHeader>
<CardHeader> <CardTitle className="text-foreground flex items-center">
<CardTitle className="text-foreground flex items-center"> <Router className="h-5 w-5 mr-2" />
<Network className="h-5 w-5 mr-2" /> Physical Interfaces
VM & LXC Network Interfaces <Badge variant="outline" className="ml-3 bg-blue-500/10 text-blue-500 border-blue-500/20">
<Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20"> {networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active
{networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active </Badge>
</Badge> </CardTitle>
</CardTitle> </CardHeader>
</CardHeader> <CardContent>
<CardContent> <div className="space-y-4">
<div className="space-y-4"> {networkData.physical_interfaces.map((interface_, index) => {
{networkData.vm_lxc_interfaces.map((interface_, index) => { const typeBadge = getInterfaceTypeBadge(interface_.type)
const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
// REMOVED: const trafficData = interface_.vmid && vmLxcTraffic[interface_.vmid]
// REMOVED: const bytesRecv = trafficData ? trafficData.received : interface_.bytes_recv
// REMOVED: const bytesSent = trafficData ? trafficData.sent : interface_.bytes_sent
return ( return (
<div <div
key={index} key={index}
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer" className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
onClick={() => setSelectedInterface(interface_)} onClick={() => setSelectedInterface(interface_)}
> >
{/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */} {/* First row: Icon, Name, Type Badge, Status */}
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" /> <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap"> <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
<div className="font-medium text-foreground">{interface_.name}</div> <div className="font-medium text-foreground">{interface_.name}</div>
<Badge variant="outline" className={vmTypeBadge.color}> <Badge variant="outline" className={typeBadge.color}>
{vmTypeBadge.label} {typeBadge.label}
</Badge>
{interface_.vm_name && (
<div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
)}
</div>
<Badge
variant="outline"
className={
interface_.status === "up"
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{interface_.status.toUpperCase()}
</Badge> </Badge>
</div> </div>
<Badge
{/* Second row: Details - Responsive layout */} variant="outline"
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm"> className={
<div> interface_.status === "up"
<div className="text-sm text-muted-foreground">VMID</div> ? "bg-green-500/10 text-green-500 border-green-500/20"
<div className="font-medium">{interface_.vmid ?? "N/A"}</div> : "bg-red-500/10 text-red-500 border-red-500/20"
</div> }
>
<div> {interface_.status.toUpperCase()}
<div className="text-sm text-muted-foreground">Speed</div> </Badge>
<div className="font-medium text-foreground flex items-center gap-1">
<Zap className="h-3 w-3" />
{formatSpeed(interface_.speed)}
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="text-sm text-muted-foreground">Traffic</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</div>
</div>
{interface_.mac_address && (
<div className="col-span-2 md:col-span-1">
<div className="text-sm text-muted-foreground">MAC</div>
<div className="font-medium text-foreground font-mono text-xs truncate">
{interface_.mac_address}
</div>
</div>
)}
</div>
</div> </div>
)
})} {/* Second row: Details - Responsive layout */}
</div> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
</CardContent> <div>
</Card> <div className="text-muted-foreground text-xs">IP Address</div>
)} <div className="font-medium text-foreground font-mono text-sm truncate">
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
</div>
</div>
<div>
<div className="text-muted-foreground text-xs">Speed</div>
<div className="font-medium text-foreground flex items-center gap-1 text-xs">
<Zap className="h-3 w-3" />
{formatSpeed(interface_.speed)}
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic Statistics</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</div>
</div>
{interface_.mac_address && (
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">MAC</div>
<div className="font-medium text-foreground font-mono text-xs truncate">
{interface_.mac_address}
</div>
</div>
)}
</div>
</div>
)
})}
</div>
</CardContent>
</Card>
{networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && ( {networkData.bridge_interfaces && networkData.bridge_interfaces.length > 0 && (
<Card className="bg-card border-border"> <Card className="bg-card border-border">
<CardHeader> <CardHeader>
<CardTitle className="text-foreground flex items-center flex-wrap gap-2"> <CardTitle className="text-foreground flex items-center">
<Network className="h-5 w-5 mr-2" /> <Network className="h-5 w-5 mr-2" />
Bridge Interfaces Bridge Interfaces
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20"> <Badge variant="outline" className="ml-3 bg-green-500/10 text-green-500 border-green-500/20">
{networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active {networkData.bridge_active_count ?? 0}/{networkData.bridge_total_count ?? 0} Active
</Badge> </Badge>
<Badge
variant="outline"
className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1"
>
<Info className="h-3 w-3" />
Since Boot
</Badge>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@@ -540,7 +517,7 @@ export function NetworkMetrics() {
</div> </div>
<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</div> <div className="text-muted-foreground text-xs">Traffic Statistics</div>
<div className="font-medium text-foreground text-xs"> <div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span> <span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "} {" / "}
@@ -565,96 +542,93 @@ export function NetworkMetrics() {
</Card> </Card>
)} )}
<Card className="bg-card border-border"> {/* VM & LXC Network Interfaces section */}
<CardHeader> {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
<CardTitle className="text-foreground flex items-center flex-wrap gap-2"> <Card className="bg-card border-border">
<Router className="h-5 w-5 mr-2" /> <CardHeader>
Physical Interfaces <CardTitle className="text-foreground flex items-center">
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20"> <Network className="h-5 w-5 mr-2" />
{networkData.physical_active_count ?? 0}/{networkData.physical_total_count ?? 0} Active VM & LXC Network Interfaces
</Badge> <Badge variant="outline" className="ml-3 bg-orange-500/10 text-orange-500 border-orange-500/20">
<Badge {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
variant="outline" </Badge>
className="bg-amber-500/10 text-amber-500 border-amber-500/20 flex items-center gap-1" </CardTitle>
> </CardHeader>
<Info className="h-3 w-3" /> <CardContent>
Since Boot <div className="space-y-4">
</Badge> {networkData.vm_lxc_interfaces.map((interface_, index) => {
</CardTitle> const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
</CardHeader>
<CardContent>
<div className="space-y-4">
{networkData.physical_interfaces.map((interface_, index) => {
const typeBadge = getInterfaceTypeBadge(interface_.type)
return ( return (
<div <div
key={index} key={index}
className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer" className="flex flex-col gap-3 p-4 rounded-lg border border-white/10 bg-white/5 sm:bg-card sm:hover:bg-white/5 transition-colors cursor-pointer"
onClick={() => setSelectedInterface(interface_)} onClick={() => setSelectedInterface(interface_)}
> >
{/* First row: Icon, Name, Type Badge, Status */} {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
<Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" /> <Wifi className="h-5 w-5 text-muted-foreground flex-shrink-0" />
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap"> <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
<div className="font-medium text-foreground">{interface_.name}</div> <div className="font-medium text-foreground">{interface_.name}</div>
<Badge variant="outline" className={typeBadge.color}> <Badge variant="outline" className={vmTypeBadge.color}>
{typeBadge.label} {vmTypeBadge.label}
</Badge>
{interface_.vm_name && (
<div className="text-sm text-muted-foreground truncate">→ {interface_.vm_name}</div>
)}
</div>
<Badge
variant="outline"
className={
interface_.status === "up"
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{interface_.status.toUpperCase()}
</Badge> </Badge>
</div> </div>
<Badge
variant="outline"
className={
interface_.status === "up"
? "bg-green-500/10 text-green-500 border-green-500/20"
: "bg-red-500/10 text-red-500 border-red-500/20"
}
>
{interface_.status.toUpperCase()}
</Badge>
</div>
{/* Second row: Details - Responsive layout */} {/* Second row: Details - Responsive layout */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div> <div>
<div className="text-muted-foreground text-xs">IP Address</div> <div className="text-sm text-muted-foreground">VMID</div>
<div className="font-medium text-foreground font-mono text-sm truncate"> <div className="font-medium">{interface_.vmid ?? "N/A"}</div>
{interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
</div> </div>
</div>
<div> <div>
<div className="text-muted-foreground text-xs">Speed</div> <div className="text-sm text-muted-foreground">Speed</div>
<div className="font-medium text-foreground flex items-center gap-1 text-xs"> <div className="font-medium text-foreground flex items-center gap-1">
<Zap className="h-3 w-3" /> <Zap className="h-3 w-3" />
{formatSpeed(interface_.speed)} {formatSpeed(interface_.speed)}
</div>
</div>
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">Traffic</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</div>
</div>
{interface_.mac_address && (
<div className="col-span-2 md:col-span-1">
<div className="text-muted-foreground text-xs">MAC</div>
<div className="font-medium text-foreground font-mono text-xs truncate">
{interface_.mac_address}
</div> </div>
</div> </div>
)}
<div className="col-span-2 md:col-span-1">
<div className="text-sm text-muted-foreground">Traffic Statistics</div>
<div className="font-medium text-foreground text-xs">
<span className="text-green-500">↓ {formatBytes(interface_.bytes_recv)}</span>
{" / "}
<span className="text-blue-500">↑ {formatBytes(interface_.bytes_sent)}</span>
</div>
</div>
{interface_.mac_address && (
<div className="col-span-2 md:col-span-1">
<div className="text-sm text-muted-foreground">MAC</div>
<div className="font-medium text-foreground font-mono text-xs truncate">
{interface_.mac_address}
</div>
</div>
)}
</div>
</div> </div>
</div> )
) })}
})} </div>
</div> </CardContent>
</CardContent> </Card>
</Card> )}
{/* Interface Details Modal */} {/* Interface Details Modal */}
<Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}> <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
@@ -858,18 +832,6 @@ export function NetworkMetrics() {
</div> </div>
</div> </div>
{/* Network chart for VM/LXC interfaces */}
{selectedInterface.type === "vm_lxc" && selectedInterface.vmid && selectedInterface.vm_type && (
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
<VMNetworkChart
vmid={selectedInterface.vmid}
vmType={selectedInterface.vm_type as "qemu" | "lxc"}
initialTimeframe={timeframe}
/>
</div>
)}
{/* Bond Information */} {/* Bond Information */}
{selectedInterface.type === "bond" && selectedInterface.bond_slaves && ( {selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
<div> <div>

195
AppImage/components/vm-lxc-network-chart.tsx
View File

@@ -1,195 +0,0 @@
"use client"
import { useEffect, useState } from "react"
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
import useSWR from "swr"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
interface VMNetworkChartProps {
vmid: number
vmType: "qemu" | "lxc"
initialTimeframe?: "hour" | "day" | "week" | "month" | "year"
}
const fetcher = async (url: string) => {
const response = await fetch(url, {
method: "GET",
headers: { "Content-Type": "application/json" },
signal: AbortSignal.timeout(10000),
})
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
return response.json()
}
const formatBytes = (bytes: number): string => {
if (bytes === 0) return "0 B"
const k = 1024
const sizes = ["B", "KB", "MB", "GB", "TB"]
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
}
export function VMNetworkChart({ vmid, vmType, initialTimeframe = "day" }: VMNetworkChartProps) {
const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">(initialTimeframe)
const [visibleLines, setVisibleLines] = useState({ received: true, sent: true })
const [chartData, setChartData] = useState<any[]>([])
const { data: rrdData } = useSWR(`/api/${vmType}/${vmid}/rrddata?timeframe=${timeframe}`, fetcher, {
refreshInterval: 30000,
revalidateOnFocus: false,
})
useEffect(() => {
if (!rrdData) return
const transformedData = rrdData.map((point: any) => {
const timestamp = new Date(point.time * 1000)
const hours = timestamp.getHours().toString().padStart(2, "0")
const minutes = timestamp.getMinutes().toString().padStart(2, "0")
const month = (timestamp.getMonth() + 1).toString().padStart(2, "0")
const day = timestamp.getDate().toString().padStart(2, "0")
let timeLabel = `${hours}:${minutes}`
if (timeframe === "week" || timeframe === "month") {
timeLabel = `${month}/${day}`
} else if (timeframe === "year") {
timeLabel = `${month}/${day}`
}
// Calculate traffic in GB for the interval
const intervalSeconds = timeframe === "hour" ? 60 : timeframe === "day" ? 60 : timeframe === "week" ? 1800 : 3600
const receivedGB = ((point.netin || 0) * intervalSeconds) / (1024 * 1024 * 1024)
const sentGB = ((point.netout || 0) * intervalSeconds) / (1024 * 1024 * 1024)
return {
time: timeLabel,
received: receivedGB,
sent: sentGB,
}
})
setChartData(transformedData)
}, [rrdData, timeframe])
const toggleLine = (line: "received" | "sent") => {
setVisibleLines((prev) => ({ ...prev, [line]: !prev[line] }))
}
const getTimeframeLabel = () => {
switch (timeframe) {
case "hour":
return "1 Hour"
case "day":
return "24 Hours"
case "week":
return "7 Days"
case "month":
return "30 Days"
case "year":
return "1 Year"
default:
return "24 Hours"
}
}
const CustomTooltip = ({ active, payload }: any) => {
if (active && payload && payload.length) {
return (
<div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg p-3 shadow-lg">
<p className="text-sm font-medium text-foreground mb-2">{payload[0].payload.time}</p>
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center justify-between gap-4 text-sm">
<span className="flex items-center gap-2">
<span className="w-3 h-3 rounded-full" style={{ backgroundColor: entry.color }} />
<span className="text-muted-foreground">{entry.name}:</span>
</span>
<span className="font-medium text-foreground">{formatBytes(entry.value * 1024 * 1024 * 1024)}</span>
</div>
))}
</div>
)
}
return null
}
return (
<div className="space-y-4">
{/* Timeframe Selector */}
<div className="flex justify-end">
<Select value={timeframe} onValueChange={(value: any) => setTimeframe(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>
{/* Interactive Legend */}
<div className="flex items-center justify-center gap-6 pb-2">
<button
onClick={() => toggleLine("received")}
className={`flex items-center gap-2 transition-opacity ${!visibleLines.received ? "opacity-40" : ""}`}
>
<span className="w-3 h-3 rounded-full bg-green-500" />
<span className="text-sm font-medium">Received</span>
</button>
<button
onClick={() => toggleLine("sent")}
className={`flex items-center gap-2 transition-opacity ${!visibleLines.sent ? "opacity-40" : ""}`}
>
<span className="w-3 h-3 rounded-full bg-blue-500" />
<span className="text-sm font-medium">Sent</span>
</button>
</div>
{/* Chart */}
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
<defs>
<linearGradient id="colorReceived" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorSent" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} tickLine={false} />
<YAxis
stroke="hsl(var(--muted-foreground))"
fontSize={12}
tickLine={false}
tickFormatter={(value) => {
if (value === 0) return "0"
if (value < 0.01) return `${(value * 1024).toFixed(0)} MB`
return `${value.toFixed(2)} GB`
}}
label={{ value: "GB", angle: -90, position: "insideLeft", style: { fill: "hsl(var(--muted-foreground))" } }}
/>
<Tooltip content={<CustomTooltip />} />
{visibleLines.received && (
<Area
type="monotone"
dataKey="received"
stroke="#10b981"
strokeWidth={2}
fill="url(#colorReceived)"
name="Received"
/>
)}
{visibleLines.sent && (
<Area type="monotone" dataKey="sent" stroke="#3b82f6" strokeWidth={2} fill="url(#colorSent)" name="Sent" />
)}
</AreaChart>
</ResponsiveContainer>
</div>
)
}