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 AppImage

Browse Source
This commit is contained in:
MacRimi
2025-10-25 18:09:48 +02:00
parent f93b3109b9
commit 09744818dc
2 changed files with 67 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>