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-metrics.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-24 19:58:04 +02:00
parent e9791984ee
commit 53363f293b
1 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,8 @@ import { Badge } from "./ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
import useSWR from "swr"
import { NetworkTrafficChart } from "./network-traffic-chart"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
interface NetworkData {
interfaces: NetworkInterface[]
@@ -150,6 +152,7 @@ export function NetworkMetrics() {
})
const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
const [timeframe, setTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
if (isLoading) {
return (
@@ -289,6 +292,35 @@ export function NetworkMetrics() {
</Card>
</div>
{/* 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>
{/* Network Traffic Card with Chart */}
<Card className="bg-card border-border">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-foreground flex items-center">
<Activity className="h-5 w-5 mr-2" />
Network Traffic
</CardTitle>
</CardHeader>
<CardContent>
<NetworkTrafficChart timeframe={timeframe} />
</CardContent>
</Card>
{/* Physical Interfaces section */}
<Card className="bg-card border-border">
<CardHeader>