Update AppImage

AppImage/components/network-metrics.tsx

@@ -73,10 +73,6 @@ interface NetworkInterface {
   vm_status?: string
 }
 
-interface NetworkMetricsProps {
-  isActive?: boolean
-}
-
 const getInterfaceTypeBadge = (type: string) => {
   switch (type) {
     case "physical":
@@ -147,16 +143,15 @@ const fetcher = async (url: string): Promise<NetworkData> => {
   return response.json()
 }
 
-export function NetworkMetrics({ isActive = true }: NetworkMetricsProps) {
+export function NetworkMetrics() {
   const {
     data: networkData,
     error,
     isLoading,
   } = useSWR<NetworkData>("/api/network", fetcher, {
-    refreshInterval: isActive ? 60000 : 0, // Refresh every 60 seconds only if active, otherwise pause
+    refreshInterval: 60000, // Refresh every 60 seconds
     revalidateOnFocus: false,
     revalidateOnReconnect: true,
-    isPaused: () => !isActive,
   })
 
   const [selectedInterface, setSelectedInterface] = useState<NetworkInterface | null>(null)
@@ -171,15 +166,10 @@ export function NetworkMetrics({ isActive = true }: NetworkMetricsProps) {
     revalidateOnReconnect: true,
   })
 
-  const { data: interfaceHistoricalData } = useSWR<any>(
-    isActive ? `/api/node/metrics?timeframe=${timeframe}` : null,
-    fetcher,
-    {
-      refreshInterval: isActive ? 30000 : 0,
-      revalidateOnFocus: false,
-      isPaused: () => !isActive,
-    },
-  )
+  const { data: interfaceHistoricalData } = useSWR<any>(`/api/node/metrics?timeframe=${timeframe}`, fetcher, {
+    refreshInterval: 30000,
+    revalidateOnFocus: false,
+  })
 
   if (isLoading) {
     return (

AppImage/components/network-traffic-chart.tsx

@@ -16,7 +16,6 @@ interface NetworkTrafficChartProps {
   interfaceName?: string
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
   refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
-  isActive?: boolean
 }
 
 const CustomNetworkTooltip = ({ active, payload, label }: any) => {
@@ -44,7 +43,6 @@ export function NetworkTrafficChart({
   interfaceName,
   onTotalsCalculated,
   refreshInterval = 60000,
-  isActive = true,
 }: NetworkTrafficChartProps) {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
@@ -61,20 +59,16 @@ export function NetworkTrafficChart({
   }, [timeframe, interfaceName])
 
   useEffect(() => {
-    if (refreshInterval > 0 && isActive) {
+    if (refreshInterval > 0) {
       const interval = setInterval(() => {
         fetchMetrics()
       }, refreshInterval)
 
       return () => clearInterval(interval)
     }
-  }, [timeframe, interfaceName, refreshInterval, isActive])
+  }, [timeframe, interfaceName, refreshInterval])
 
   const fetchMetrics = async () => {
-    if (!isActive) {
-      return
-    }
-
     if (isInitialLoad) {
       setLoading(true)
     }

AppImage/components/node-metrics-charts.tsx

@@ -78,12 +78,6 @@ export function NodeMetricsCharts() {
   useEffect(() => {
     console.log("[v0] NodeMetricsCharts component mounted")
     fetchMetrics()
-
-    const interval = setInterval(() => {
-      fetchMetrics()
-    }, 60000) // 60 seconds instead of 30 to reduce server load
-
-    return () => clearInterval(interval)
   }, [timeframe])
 
   const fetchMetrics = async () => {

AppImage/components/proxmox-dashboard.tsx

@@ -10,9 +10,9 @@ import { NetworkMetrics } from "./network-metrics"
 import { VirtualMachines } from "./virtual-machines"
 import Hardware from "./hardware"
 import { SystemLogs } from "./system-logs"
+import { Settings } from "./settings"
 import { OnboardingCarousel } from "./onboarding-carousel"
 import { HealthStatusModal } from "./health-status-modal"
-import { Settings } from "./settings"
 import { getApiUrl } from "../lib/api-config"
 import {
   RefreshCw,
@@ -129,12 +129,8 @@ export function ProxmoxDashboard() {
   }, [])
 
   useEffect(() => {
-    // Only fetch if we actually need the data (always for header)
     fetchSystemData()
-
-    // Poll every 30 seconds for header info (less frequent since it's just for display)
-    const interval = setInterval(fetchSystemData, 30000)
-
+    const interval = setInterval(fetchSystemData, 10000)
     return () => clearInterval(interval)
   }, [fetchSystemData])
 
@@ -546,7 +542,7 @@ export function ProxmoxDashboard() {
       <div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
           <TabsContent value="overview" className="space-y-4 md:space-y-6 mt-0">
-            <SystemOverview key={`overview-${componentKey}`} isActive={activeTab === "overview"} />
+            <SystemOverview key={`overview-${componentKey}`} />
           </TabsContent>
 
           <TabsContent value="storage" className="space-y-4 md:space-y-6 mt-0">
@@ -554,7 +550,7 @@ export function ProxmoxDashboard() {
           </TabsContent>
 
           <TabsContent value="network" className="space-y-4 md:space-y-6 mt-0">
-            <NetworkMetrics key={`network-${componentKey}`} isActive={activeTab === "network"} />
+            <NetworkMetrics key={`network-${componentKey}`} />
           </TabsContent>
 
           <TabsContent value="vms" className="space-y-4 md:space-y-6 mt-0">

AppImage/components/system-overview.tsx

@@ -96,10 +96,6 @@ interface ProxmoxStorageData {
   }>
 }
 
-interface SystemOverviewProps {
-  isActive?: boolean
-}
-
 const fetchSystemData = async (): Promise<SystemData | null> => {
   try {
     const apiUrl = getApiUrl("/api/system")
@@ -223,7 +219,7 @@ const fetchProxmoxStorageData = async (): Promise<ProxmoxStorageData | null> =>
   }
 }
 
-export function SystemOverview({ isActive = true }: SystemOverviewProps) {
+export function SystemOverview() {
   const [systemData, setSystemData] = useState<SystemData | null>(null)
   const [vmData, setVmData] = useState<VMData[]>([])
   const [storageData, setStorageData] = useState<StorageData | null>(null)
@@ -235,10 +231,6 @@ export function SystemOverview({ isActive = true }: SystemOverviewProps) {
   const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 })
 
   useEffect(() => {
-    if (!isActive) {
-      return
-    }
-
     const fetchData = async () => {
       try {
         setLoading(true)
@@ -261,7 +253,6 @@ export function SystemOverview({ isActive = true }: SystemOverviewProps) {
       }
     }
 
-    // Initial fetch
     fetchData()
 
     const systemInterval = setInterval(() => {
@@ -270,11 +261,10 @@ export function SystemOverview({ isActive = true }: SystemOverviewProps) {
       })
     }, 10000)
 
-    // Clean up interval when component unmounts or becomes inactive
     return () => {
       clearInterval(systemInterval)
     }
-  }, [isActive]) // Add isActive as dependency
+  }, [])
 
   useEffect(() => {
     const fetchVMs = async () => {
@@ -731,11 +721,7 @@ export function SystemOverview({ isActive = true }: SystemOverviewProps) {
                 </div>
 
                 <div className="pt-3 border-t border-border">
-                  <NetworkTrafficChart
-                    timeframe={networkTimeframe}
-                    onTotalsCalculated={setNetworkTotals}
-                    isActive={isActive}
-                  />
+                  <NetworkTrafficChart timeframe={networkTimeframe} onTotalsCalculated={setNetworkTotals} />
                 </div>
               </div>
             ) : (

AppImage/components/virtual-machines.tsx

@@ -350,7 +350,7 @@ export function VirtualMachines() {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.JSON.stringify({ action }),
+        body: JSON.stringify({ action }),
       })
 
       if (response.ok) {
@@ -451,7 +451,7 @@ export function VirtualMachines() {
     "/api/system",
     fetcher,
     {
-      refreshInterval: 60000, // Changed from 30s to 60s
+      refreshInterval: 30000,
       revalidateOnFocus: false,
     },
   )