🐛fix: get system info and system usage (#5884)

web-app/src/routes/settings/hardware.tsx

@@ -8,9 +8,9 @@ import { Progress } from '@/components/ui/progress'
 import { useTranslation } from '@/i18n/react-i18next-compat'
 import { useHardware } from '@/hooks/useHardware'
 import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { IconDeviceDesktopAnalytics } from '@tabler/icons-react'
-import { getSystemUsage } from '@/services/hardware'
+import { getHardwareInfo, getSystemUsage } from '@/services/hardware'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { formatMegaBytes } from '@/lib/utils'
 import { windowKey } from '@/constants/windows'
@@ -25,6 +25,7 @@ export const Route = createFileRoute(route.settings.hardware as any)({
 
 function Hardware() {
   const { t } = useTranslation()
+  const [isLoading, setIsLoading] = useState(false)
   const {
     hardwareData,
     systemUsage,
@@ -51,6 +52,29 @@ function Hardware() {
     fetchDevices()
   }, [fetchDevices])
 
+  // Fetch initial hardware info and system usage
+  useEffect(() => {
+    setIsLoading(true)
+    Promise.all([
+      getHardwareInfo()
+        .then((data) => {
+          setHardwareData(data)
+        })
+        .catch((error) => {
+          console.error('Failed to get hardware info:', error)
+        }),
+      getSystemUsage()
+        .then((data) => {
+          updateSystemUsage(data)
+        })
+        .catch((error) => {
+          console.error('Failed to get initial system usage:', error)
+        }),
+    ]).finally(() => {
+      setIsLoading(false)
+    })
+  }, [setHardwareData, updateSystemUsage])
+
   const { getProviderByName } = useModelProvider()
 
   // Initialize llamacpp device activations from provider settings
@@ -92,13 +116,17 @@ function Hardware() {
   useEffect(() => {
     if (pollingPaused) return
     const intervalId = setInterval(() => {
-      getSystemUsage().then((data) => {
+      getSystemUsage()
+        .then((data) => {
           updateSystemUsage(data)
         })
+        .catch((error) => {
+          console.error('Failed to get system usage:', error)
+        })
     }, 5000)
 
     return () => clearInterval(intervalId)
-  }, [setHardwareData, updateSystemUsage, pollingPaused])
+  }, [updateSystemUsage, pollingPaused])
 
   const handleClickSystemMonitor = async () => {
     try {
@@ -154,6 +182,13 @@ function Hardware() {
       <div className="flex h-full w-full">
         <SettingsMenu />
         <div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-32">
+              <div className="text-main-view-fg/50">
+                Loading hardware information...
+              </div>
+            </div>
+          ) : (
             <div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
               {/* OS Information */}
               <Card title={t('settings:hardware.os')}>
@@ -261,7 +296,8 @@ function Hardware() {
                           <Progress
                             value={
                               toNumber(
-                              systemUsage.used_memory / systemUsage.total_memory
+                                systemUsage.used_memory /
+                                  systemUsage.total_memory
                               ) * 100
                             }
                             className="h-2 w-10"
@@ -269,7 +305,8 @@ function Hardware() {
                           <span className="text-main-view-fg/80">
                             {(
                               toNumber(
-                              systemUsage.used_memory / systemUsage.total_memory
+                                systemUsage.used_memory /
+                                  systemUsage.total_memory
                               ) * 100
                             ).toFixed(2)}
                             %
@@ -341,6 +378,7 @@ function Hardware() {
                 </Card>
               )}
             </div>
+          )}
         </div>
       </div>
     </div>

web-app/src/routes/system-monitor.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from '@/i18n/react-i18next-compat'
 import { toNumber } from '@/utils/number'
 import { useLlamacppDevices } from '@/hooks/useLlamacppDevices'
 import { useModelProvider } from '@/hooks/useModelProvider'
+import { getSystemUsage } from '@/services/hardware'
 
 export const Route = createFileRoute(route.systemMonitor as any)({
   component: SystemMonitor,
@@ -34,6 +35,21 @@ function SystemMonitor() {
     fetchDevices()
   }, [updateSystemUsage, fetchDevices])
 
+  // Poll system usage every 5 seconds
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      getSystemUsage()
+        .then((data) => {
+          updateSystemUsage(data)
+        })
+        .catch((error) => {
+          console.error('Failed to get system usage:', error)
+        })
+    }, 5000)
+
+    return () => clearInterval(intervalId)
+  }, [updateSystemUsage])
+
   // Initialize when hardware data and llamacpp devices are available
   useEffect(() => {
     if (hardwareData.gpus.length > 0 && !isInitialized) {