mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-02 08:06:17 +00:00
Create AppImage
This commit is contained in:
MacRimi
265
AppImage/components/network-metrics.tsx
Normal file
265
AppImage/components/network-metrics.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
|
||||
import { Wifi, Globe, Shield, Activity, Network, Router } from "lucide-react"
|
||||
|
||||
const networkTraffic = [
|
||||
{ time: "00:00", incoming: 45, outgoing: 32 },
|
||||
{ time: "04:00", incoming: 52, outgoing: 28 },
|
||||
{ time: "08:00", incoming: 78, outgoing: 65 },
|
||||
{ time: "12:00", incoming: 65, outgoing: 45 },
|
||||
{ time: "16:00", incoming: 82, outgoing: 58 },
|
||||
{ time: "20:00", incoming: 58, outgoing: 42 },
|
||||
{ time: "24:00", incoming: 43, outgoing: 35 },
|
||||
]
|
||||
|
||||
const connectionData = [
|
||||
{ time: "00:00", connections: 1250 },
|
||||
{ time: "04:00", connections: 980 },
|
||||
{ time: "08:00", connections: 1850 },
|
||||
{ time: "12:00", connections: 1650 },
|
||||
{ time: "16:00", connections: 2100 },
|
||||
{ time: "20:00", connections: 1580 },
|
||||
{ time: "24:00", connections: 1320 },
|
||||
]
|
||||
|
||||
export function NetworkMetrics() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Network Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Network Traffic</CardTitle>
|
||||
<Activity className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">156 MB/s</div>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<span className="text-xs text-green-500">↓ 89 MB/s</span>
|
||||
<span className="text-xs text-blue-500">↑ 67 MB/s</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Peak: 245 MB/s at 16:30</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Active Connections</CardTitle>
|
||||
<Network className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">1,847</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Normal
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<span className="text-green-500">↑ 12%</span> from last hour
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Firewall Status</CardTitle>
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">Active</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Protected
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">247 blocked attempts today</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">Latency</CardTitle>
|
||||
<Globe className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-foreground">12ms</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
Excellent
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">Avg response time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Network Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Activity className="h-5 w-5 mr-2" />
|
||||
Network Traffic (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={networkTraffic}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
||||
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
formatter={(value, name) => [`${value} MB/s`, name === "incoming" ? "Incoming" : "Outgoing"]}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="incoming"
|
||||
stackId="1"
|
||||
stroke="#10b981"
|
||||
fill="#10b981"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="outgoing"
|
||||
stackId="1"
|
||||
stroke="#3b82f6"
|
||||
fill="#3b82f6"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Network className="h-5 w-5 mr-2" />
|
||||
Active Connections (24h)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={connectionData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
||||
<XAxis dataKey="time" stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "hsl(var(--card))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "8px",
|
||||
color: "hsl(var(--foreground))",
|
||||
}}
|
||||
formatter={(value) => [`${value}`, "Connections"]}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="connections"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Network Interfaces */}
|
||||
<Card className="bg-card border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-foreground flex items-center">
|
||||
<Router className="h-5 w-5 mr-2" />
|
||||
Network Interfaces
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
name: "vmbr0",
|
||||
type: "Bridge",
|
||||
status: "up",
|
||||
ip: "192.168.1.100/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "2.3 GB",
|
||||
tx: "1.8 GB",
|
||||
},
|
||||
{
|
||||
name: "enp1s0",
|
||||
type: "Physical",
|
||||
status: "up",
|
||||
ip: "192.168.1.101/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "1.2 GB",
|
||||
tx: "890 MB",
|
||||
},
|
||||
{
|
||||
name: "vmbr1",
|
||||
type: "Bridge",
|
||||
status: "up",
|
||||
ip: "10.0.0.1/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "456 MB",
|
||||
tx: "234 MB",
|
||||
},
|
||||
{
|
||||
name: "tap101i0",
|
||||
type: "TAP",
|
||||
status: "up",
|
||||
ip: "10.0.0.101/24",
|
||||
speed: "1000 Mbps",
|
||||
rx: "123 MB",
|
||||
tx: "89 MB",
|
||||
},
|
||||
].map((interface_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border bg-card/50"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Wifi className="h-5 w-5 text-muted-foreground" />
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{interface_.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{interface_.type} • {interface_.speed}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">IP Address</div>
|
||||
<div className="text-sm font-medium text-foreground font-mono">{interface_.ip}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm text-muted-foreground">RX / TX</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{interface_.rx} / {interface_.tx}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
{interface_.status.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user