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-25 20:55:24 +02:00
parent b0a7b6c7cd
commit 73181f9e33
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -153,6 +153,7 @@ 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 [modalTimeframe, setModalTimeframe] = 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 })
const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, { const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
@@ -634,9 +635,23 @@ export function NetworkMetrics() {
<Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}> <Dialog open={!!selectedInterface} onOpenChange={() => setSelectedInterface(null)}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto"> <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2 justify-between">
<Router className="h-5 w-5" /> <div className="flex items-center gap-2">
{selectedInterface?.name} - Interface Details <Router className="h-5 w-5" />
{selectedInterface?.name} - Interface Details
</div>
<Select value={modalTimeframe} onValueChange={(value: any) => setModalTimeframe(value)}>
<SelectTrigger className="w-[140px] 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>
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
@@ -832,6 +847,18 @@ export function NetworkMetrics() {
</div> </div>
</div> </div>
{/* Network Traffic Chart for the selected interface */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-3">Network Traffic History</h3>
<div className="bg-muted/30 rounded-lg p-4">
<NetworkTrafficChart
timeframe={modalTimeframe}
interfaceName={selectedInterface.name}
onTotalsCalculated={() => {}}
/>
</div>
</div>
{/* Bond Information */} {/* Bond Information */}
{selectedInterface.type === "bond" && selectedInterface.bond_slaves && ( {selectedInterface.type === "bond" && selectedInterface.bond_slaves && (
<div> <div>