From ae69fec7ceb65524ecf738f7d06cf62cdd6690a8 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Tue, 18 Nov 2025 21:11:56 +0100 Subject: [PATCH] Update AppImage --- .../components/interface-details-modal.tsx | 16 ++++-- AppImage/components/network-card.tsx | 13 +++-- AppImage/components/settings.tsx | 2 +- AppImage/components/system-overview.tsx | 50 +++---------------- AppImage/lib/network-utils.ts | 14 ++++-- 5 files changed, 38 insertions(+), 57 deletions(-) diff --git a/AppImage/components/interface-details-modal.tsx b/AppImage/components/interface-details-modal.tsx index 206d342..2d63210 100644 --- a/AppImage/components/interface-details-modal.tsx +++ b/AppImage/components/interface-details-modal.tsx @@ -1,6 +1,8 @@ +"use client" +import { useState, useEffect } from "react" +import { Dialog, DialogContent } from "@radix-ui/react-dialog" import { getUnitsSettings, formatNetworkTraffic, getNetworkLabel } from "@/lib/network-utils" - export function InterfaceDetailsModal({ interface_, onClose, timeframe }: InterfaceDetailsModalProps) { const [metricsData, setMetricsData] = useState([]) const [loading, setLoading] = useState(false) @@ -10,16 +12,20 @@ export function InterfaceDetailsModal({ interface_, onClose, timeframe }: Interf const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") - const handleStorageChange = () => { + const handleSettingsChange = () => { const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") } - window.addEventListener('storage', handleStorageChange) - return () => window.removeEventListener('storage', handleStorageChange) + window.addEventListener('storage', handleSettingsChange) + window.addEventListener('unitsSettingsChanged', handleSettingsChange) + + return () => { + window.removeEventListener('storage', handleSettingsChange) + window.removeEventListener('unitsSettingsChanged', handleSettingsChange) + } }, []) - const totalReceived = metricsData.length > 0 ? Math.max(0, (metricsData[metricsData.length - 1].netin || 0) - (metricsData[0].netin || 0)) : 0 diff --git a/AppImage/components/network-card.tsx b/AppImage/components/network-card.tsx index bd4215d..16a6d7f 100644 --- a/AppImage/components/network-card.tsx +++ b/AppImage/components/network-card.tsx @@ -5,7 +5,7 @@ import { Badge } from "./ui/badge" import { Wifi, Zap } from 'lucide-react' import { useState, useEffect } from "react" import { fetchApi } from "../lib/api-config" -import { getUnitsSettings, formatNetworkTraffic, getNetworkLabel } from "../lib/network-utils" +import { getUnitsSettings, formatNetworkTraffic } from "../lib/network-utils" interface NetworkCardProps { interface_: { @@ -99,13 +99,18 @@ export function NetworkCard({ interface_, timeframe, onClick }: NetworkCardProps const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") - const handleStorageChange = () => { + const handleSettingsChange = () => { const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") } - window.addEventListener('storage', handleStorageChange) - return () => window.removeEventListener('storage', handleStorageChange) + window.addEventListener('storage', handleSettingsChange) + window.addEventListener('unitsSettingsChanged', handleSettingsChange) + + return () => { + window.removeEventListener('storage', handleSettingsChange) + window.removeEventListener('unitsSettingsChanged', handleSettingsChange) + } }, []) useEffect(() => { diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx index dc54384..eb20ae1 100644 --- a/AppImage/components/settings.tsx +++ b/AppImage/components/settings.tsx @@ -71,7 +71,7 @@ export function Settings() { setNetworkUnitSettings(unit); // Dispatch custom event to notify other components - window.dispatchEvent(new Event('unitsSettingsChanged')) + window.dispatchEvent(new CustomEvent('unitsSettingsChanged', { detail: settings })) window.dispatchEvent(new Event('storage')) }; diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx index 4152bda..26cca48 100644 --- a/AppImage/components/system-overview.tsx +++ b/AppImage/components/system-overview.tsx @@ -9,6 +9,7 @@ import { NodeMetricsCharts } from "./node-metrics-charts" import { NetworkTrafficChart } from "./network-traffic-chart" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" import { fetchApi } from "../lib/api-config" +import { getUnitsSettings } from "../lib/network-utils" interface SystemData { cpu_usage: number @@ -164,34 +165,20 @@ export function SystemOverview() { const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes") useEffect(() => { - const getSettings = () => { - if (typeof window === 'undefined') return { networkUnit: 'Bytes' as const } - try { - const settings = window.localStorage.getItem('unitsSettings') - if (settings) { - const parsed = JSON.parse(settings) - return { networkUnit: parsed.networkUnit || 'Bytes' } - } - } catch (e) { - console.error('[v0] Error reading units settings:', e) - } - return { networkUnit: 'Bytes' as const } - } - - const settings = getSettings() + const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") - const handleStorageChange = () => { - const settings = getSettings() + const handleSettingsChange = () => { + const settings = getUnitsSettings() setNetworkUnit(settings.networkUnit as "Bytes" | "Bits") } - window.addEventListener('storage', handleStorageChange) - window.addEventListener('unitsSettingsChanged', handleStorageChange) + window.addEventListener('storage', handleSettingsChange) + window.addEventListener('unitsSettingsChanged', handleSettingsChange) return () => { - window.removeEventListener('storage', handleStorageChange) - window.removeEventListener('unitsSettingsChanged', handleStorageChange) + window.removeEventListener('storage', handleSettingsChange) + window.removeEventListener('unitsSettingsChanged', handleSettingsChange) } }, []) @@ -341,27 +328,6 @@ export function SystemOverview() { } } - const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => { - if (unit === "Bits") { - const sizeInBits = sizeInGB * 8 - if (sizeInBits < 1024) { - return `${sizeInBits.toFixed(1)} b` - } else if (sizeInBits < 1024 ** 2) { - return `${(sizeInBits / 1024).toFixed(1)} Kb` - } else if (sizeInBits < 1024 ** 3) { - return `${(sizeInBits / 1024 ** 2).toFixed(1)} Mb` - } else if (sizeInBits < 1024 ** 4) { - return `${(sizeInBits / 1024 ** 3).toFixed(2)} Gb` - } else if (sizeInBits < 1024 ** 5) { - return `${(sizeInBits / 1024 ** 4).toFixed(2)} Tb` - } else { - return `${(sizeInBits / 1024 ** 5).toFixed(2)} Pb` - } - } else { - return formatStorage(sizeInGB) - } - } - const tempStatus = getTemperatureStatus(systemData.temperature) const localStorage = proxmoxStorageData?.storage.find((s) => s.name === "local") diff --git a/AppImage/lib/network-utils.ts b/AppImage/lib/network-utils.ts index 7b7ec0f..1b603cd 100644 --- a/AppImage/lib/network-utils.ts +++ b/AppImage/lib/network-utils.ts @@ -16,18 +16,22 @@ export const getUnitsSettings = () => { export const formatNetworkTraffic = (sizeInGB: number, unit: "Bytes" | "Bits" = "Bytes"): string => { if (unit === "Bits") { - const sizeInGb = sizeInGB * 8 + const sizeInGb = sizeInGB * 8 // Convert gigabytes to gigabits + // Use decimal (base 1000) for bits if (sizeInGb < 0.001) { - return `${(sizeInGb * 1024).toFixed(1)} Mb` + return `${(sizeInGb * 1000 * 1000).toFixed(2)} Mb` } else if (sizeInGb < 1) { - return `${(sizeInGb * 1024).toFixed(1)} Mb` - } else if (sizeInGb < 1024) { + return `${(sizeInGb * 1000).toFixed(2)} Mb` + } else if (sizeInGb < 1000) { return `${sizeInGb.toFixed(1)} Gb` + } else if (sizeInGb < 1000000) { + return `${(sizeInGb / 1000).toFixed(2)} Tb` } else { - return `${(sizeInGb / 1024).toFixed(1)} Tb` + return `${(sizeInGb / 1000000).toFixed(2)} Pb` } } else { + // Bytes mode - use binary base (1024) if (sizeInGB < 1) { return `${(sizeInGB * 1024).toFixed(1)} MB` } else if (sizeInGB < 1024) {