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

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-11-18 19:00:51 +01:00
parent 4f61386b21
commit ce5c679d6b
7 changed files with 152 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
import { Wifi, Activity, Network, Router, AlertCircle, Zap } from "lucide-react"
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"
@@ -135,7 +135,6 @@ const fetcher = async (url: string): Promise<NetworkData> => {
const getUnitsSettings = (): "Bytes" | "Bits" => {
const raw = localStorage.getItem("proxmenux-network-unit");
const networkUnit = raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes";
console.log("[v0] Loaded network unit from localStorage:", networkUnit);
return networkUnit;
};
@@ -155,6 +154,13 @@ export function NetworkMetrics() {
const [modalTimeframe, setModalTimeframe] = useState<"hour" | "day" | "week" | "month" | "year">("day")
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
const [interfaceTotals, setInterfaceTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes");
useEffect(() => {
const networkUnitSetting = getUnitsSettings();
setNetworkUnit(networkUnitSetting);
}, []);
const { data: modalNetworkData } = useSWR<NetworkData>(selectedInterface ? "/api/network" : null, fetcher, {
refreshInterval: 17000,
@@ -167,13 +173,6 @@ export function NetworkMetrics() {
revalidateOnFocus: false,
})
const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes");
useEffect(() => {
const networkUnitSetting = getUnitsSettings();
setNetworkUnit(networkUnitSetting);
}, []);
if (isLoading) {
return (
<div className="space-y-6">
@@ -906,6 +905,7 @@ export function NetworkMetrics() {
interfaceName={displayInterface.name}
onTotalsCalculated={setInterfaceTotals}
refreshInterval={60000}
networkUnit={networkUnit}
/>
</div>

51
AppImage/components/network-traffic-chart.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from "react"
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
import { Loader2 } from "lucide-react"
import { Loader2 } from 'lucide-react'
import { fetchApi } from "@/lib/api-config"
interface NetworkMetricsData {
@@ -17,16 +17,15 @@ interface NetworkTrafficChartProps {
interfaceName?: string
onTotalsCalculated?: (totals: { received: number; sent: number }) => void
refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
networkUnit?: "Bytes" | "Bits"
networkUnit?: string // Added networkUnit prop with default value
}
export function NetworkTrafficChart({
timeframe,
interfaceName,
onTotalsCalculated,
refreshInterval = 60000,
networkUnit = "Bits",
networkUnit = "Bytes", // Added networkUnit prop with default value
}: NetworkTrafficChartProps) {
const [data, setData] = useState<NetworkMetricsData[]>([])
const [loading, setLoading] = useState(true)
@@ -122,6 +121,7 @@ export function NetworkTrafficChart({
const netOutBytes = (item.netout || 0) * intervalSeconds
if (networkUnit === "Bits") {
// Convert to Gigabits: bytes * 8 / 1024^3
return {
time: timeLabel,
timestamp: item.time,
@@ -130,6 +130,7 @@ export function NetworkTrafficChart({
}
}
// Default: Convert to Gigabytes
return {
time: timeLabel,
timestamp: item.time,
@@ -189,6 +190,28 @@ export function NetworkTrafficChart({
)
}
const CustomNetworkTooltip = ({ active, payload, label }: any) => {
if (active && payload && payload.length) {
return (
<div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
<p className="text-sm font-semibold text-white mb-2">{label}</p>
<div className="space-y-1.5">
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
<span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
<span className="text-sm font-semibold text-white">
{entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}
</span>
</div>
))}
</div>
</div>
)
}
return null
}
if (loading && isInitialLoad) {
return (
<div className="flex items-center justify-center h-[300px]">
@@ -214,26 +237,6 @@ export function NetworkTrafficChart({
)
}
const CustomNetworkTooltip = ({ active, payload, label }: any) => {
if (active && payload && payload.length) {
return (
<div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
<p className="text-sm font-semibold text-white mb-2">{label}</p>
<div className="space-y-1.5">
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
<span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
<span className="text-sm font-semibold text-white">{entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}</span>
</div>
))}
</div>
</div>
)
}
return null
}
return (
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 80 }}>

36
AppImage/components/settings.tsx
View File

@@ -5,26 +5,11 @@ import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Label } from "./ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
import {
Shield,
Lock,
User,
AlertCircle,
CheckCircle,
Info,
LogOut,
Wrench,
Package,
Key,
Copy,
Eye,
EyeOff,
Ruler,
} from "lucide-react"
import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Wrench, Package, Key, Copy, Eye, EyeOff, Ruler } from 'lucide-react'
import { APP_VERSION } from "./release-notes-modal"
import { getApiUrl, fetchApi } from "../lib/api-config"
import { TwoFactorSetup } from "./two-factor-setup"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" // Added Select components
interface ProxMenuxTool {
key: string
@@ -61,9 +46,6 @@ export function Settings() {
[APP_VERSION]: true, // Current version expanded by default
})
const [networkUnitSettings, setNetworkUnitSettings] = useState("Bytes");
const [loadingUnitSettings, setLoadingUnitSettings] = useState(true);
// API Token state management
const [showApiTokenSection, setShowApiTokenSection] = useState(false)
const [apiToken, setApiToken] = useState("")
@@ -73,10 +55,13 @@ export function Settings() {
const [generatingToken, setGeneratingToken] = useState(false)
const [tokenCopied, setTokenCopied] = useState(false)
const [networkUnitSettings, setNetworkUnitSettings] = useState("Bytes");
const [loadingUnitSettings, setLoadingUnitSettings] = useState(true);
useEffect(() => {
checkAuthStatus()
loadProxmenuxTools()
getUnitsSettings();
getUnitsSettings(); // Load network unit settings on mount
}, [])
const changeNetworkUnit = (unit: string) => {
@@ -87,7 +72,6 @@ export function Settings() {
const getUnitsSettings = () => {
const networkUnit =
localStorage.getItem("proxmenux-network-unit") || "Bytes";
console.log("[v0] Loaded network unit from localStorage:", networkUnit);
setNetworkUnitSettings(networkUnit);
setLoadingUnitSettings(false);
};
@@ -873,13 +857,13 @@ export function Settings() {
</CardContent>
</Card>
)}
{/* ProxMenux unit settings*/}
{/* ProxMenux Unit Settings */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Ruler className="h-5 w-5 text-green-500" />
<CardTitle>ProxMenux unit settings</CardTitle>
<CardTitle>ProxMenux Unit Settings</CardTitle>
</div>
<CardDescription>Change settings related to units</CardDescription>
</CardHeader>
@@ -962,4 +946,4 @@ export function Settings() {
/>
</div>
)
}
}

62
AppImage/components/system-overview.tsx
View File

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Progress } from "./ui/progress"
import { Badge } from "./ui/badge"
import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Network } from "lucide-react"
import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Network } from 'lucide-react'
import { NodeMetricsCharts } from "./node-metrics-charts"
import { NetworkTrafficChart } from "./network-traffic-chart"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
@@ -146,13 +146,6 @@ const fetchProxmoxStorageData = async (): Promise<ProxmoxStorageData | null> =>
}
}
const getUnitsSettings = (): "Bytes" | "Bits" => {
const raw = localStorage.getItem("proxmenux-network-unit");
const networkUnit = raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes";
console.log("[v0] Loaded network unit from localStorage:", networkUnit);
return networkUnit;
};
export function SystemOverview() {
const [systemData, setSystemData] = useState<SystemData | null>(null)
const [vmData, setVmData] = useState<VMData[]>([])
@@ -168,7 +161,7 @@ export function SystemOverview() {
const [error, setError] = useState<string | null>(null)
const [networkTimeframe, setNetworkTimeframe] = useState("day")
const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes");
const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes")
useEffect(() => {
const fetchAllData = async () => {
@@ -186,9 +179,6 @@ export function SystemOverview() {
return
}
const networkUnitSetting = getUnitsSettings();
setNetworkUnit(networkUnitSetting);
setSystemData(systemResult)
setVmData(vmResult)
setStorageData(storageResults[0])
@@ -309,19 +299,28 @@ export function SystemOverview() {
return (bytes / 1024 ** 3).toFixed(2)
}
const formatStorage = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
let size = sizeInGB;
let sufix = "B";
if (unit === "Bits") {
size = size * 8;
sufix = "b";
}
if (size < 1) {
return `${(size * 1024).toFixed(1)} M${sufix}`
} else if (size > 999) {
return `${(size / 1024).toFixed(2)} T${sufix}`
const formatStorage = (sizeInGB: number): string => {
if (sizeInGB < 1) {
return `${(sizeInGB * 1024).toFixed(1)} MB`
} else if (sizeInGB > 999) {
return `${(sizeInGB / 1024).toFixed(2)} TB`
} else {
return `${size.toFixed(2)} G${sufix}`
return `${sizeInGB.toFixed(2)} GB`
}
}
const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => {
if (unit === "Bits") {
const sizeInGb = sizeInGB * 8
if (sizeInGb < 1) {
return `${(sizeInGb * 1024).toFixed(1)} Mb`
} else if (sizeInGb > 999) {
return `${(sizeInGb / 1024).toFixed(2)} Tb`
} else {
return `${sizeInGb.toFixed(2)} Gb`
}
} else {
return formatStorage(sizeInGB)
}
}
@@ -628,6 +627,15 @@ export function SystemOverview() {
<SelectItem value="year">1 Year</SelectItem>
</SelectContent>
</Select>
<Select value={networkUnit} onValueChange={setNetworkUnit}>
<SelectTrigger className="w-28 h-8 text-xs ml-2">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="Bytes">Bytes</SelectItem>
<SelectItem value="Bits">Bits</SelectItem>
</SelectContent>
</Select>
</CardTitle>
</CardHeader>
<CardContent>
@@ -684,21 +692,21 @@ export function SystemOverview() {
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">Received:</span>
<span className="text-lg font-semibold text-green-500 flex items-center gap-1">
↓ {formatStorage(networkTotals.received, networkUnit)}
↓ {formatNetworkTraffic(networkTotals.received, networkUnit)}
<span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">Sent:</span>
<span className="text-lg font-semibold text-blue-500 flex items-center gap-1">
↑ {formatStorage(networkTotals.sent, networkUnit)}
↑ {formatNetworkTraffic(networkTotals.sent, networkUnit)}
<span className="text-xs text-muted-foreground">({getTimeframeLabel(networkTimeframe)})</span>
</span>
</div>
</div>
<div className="pt-3 border-t border-border">
<NetworkTrafficChart timeframe={networkTimeframe} onTotalsCalculated={setNetworkTotals} networkUnit={networkUnit} />
<NetworkTrafficChart timeframe={networkTimeframe} onTotalsCalculated={setNetworkTotals} />
</div>
</div>
) : (