chore: add back GPU information to system monitoring bar

janhq · Aug 12, 2024 · 3122d13 · 3122d13
1 parent fdab8af
commit 3122d13
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/core/src/types/events/resource.event.ts b/core/src/types/events/resource.event.ts
@@ -7,9 +7,15 @@ export interface ResourceStatus {
   cpu: {
     usage: number
   }
+  gpus: GpuInfo[]
 }
 
 export interface UsedMemInfo {
   total: number
   used: number
 }
+
+export interface GpuInfo {
+  name: string | undefined
+  vram: UsedMemInfo
+}
diff --git a/electron/package.json b/electron/package.json
@@ -123,7 +123,7 @@
     "request": "^2.88.2",
     "request-progress": "^3.0.0",
     "@kirillvakalov/nut-tree__nut-js": "4.2.1-2",
-    "cortexso": "v0.5.0-40"
+    "cortexso": "v0.5.0-43"
   },
   "devDependencies": {
     "@types/js-yaml": "4.0.9",

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -35,7 +35,7 @@ const SystemMonitor: React.FC = () => {
   const [usedRam, setUsedRam] = useAtom(usedRamAtom)
   const [totalRam, setTotalRam] = useAtom(totalRamAtom)
   const [cpuUsage, setCpuUsage] = useAtom(cpuUsageAtom)
-  const gpus = useAtomValue(gpusAtom)
+  const [gpus, setGpus] = useAtom(gpusAtom)
 
   const [showFullScreen, setShowFullScreen] = useState(false)
   const [showSystemMonitorPanel, setShowSystemMonitorPanel] = useAtom(
@@ -63,13 +63,14 @@ const SystemMonitor: React.FC = () => {
           setUsedRam(resourceEvent.mem.used)
           setTotalRam(resourceEvent.mem.total)
           setCpuUsage(resourceEvent.cpu.usage)
+          setGpus(resourceEvent.gpus?.filter(gpu => gpu.name && gpu.vram.used && gpu.vram.total) ?? [])
         } catch (err) {
           console.error(err)
         }
       },
       signal: abortControllerRef.current.signal,
     })
-  }, [host, setTotalRam, setUsedRam, setCpuUsage])
+  }, [host, setTotalRam, setUsedRam, setCpuUsage, setGpus])
 
   const unregister = useCallback(() => {
     if (!abortControllerRef.current) return
@@ -195,8 +196,8 @@ const SystemMonitor: React.FC = () => {
                         <div className="flex gap-x-2">
                           <div className="">
                             <span>
-                              {gpu.memoryTotal - gpu.memoryFree}/
-                              {gpu.memoryTotal}
+                              {gpu.vram.used}/
+                              {gpu.vram.total}
                             </span>
                             <span> MB</span>
                           </div>
@@ -205,12 +206,12 @@ const SystemMonitor: React.FC = () => {
 
                       <div className="flex items-center gap-x-4">
                         <Progress
-                          value={gpu.utilization}
+                          value={Math.round(gpu.vram.used / Math.max(gpu.vram.total, 1) * 100)}
                           className="w-full"
                           size="small"
                         />
                         <span className="flex-shrink-0 ">
-                          {gpu.utilization}%
+                          {Math.round(gpu.vram.used / Math.max(gpu.vram.total, 1) * 100)}%
                         </span>
                       </div>
                     </div>

diff --git a/web/helpers/atoms/SystemBar.atom.ts b/web/helpers/atoms/SystemBar.atom.ts
@@ -1,11 +1,12 @@
+import { GpuInfo } from '@janhq/core/.'
 import { atom } from 'jotai'
 
 export const totalRamAtom = atom<number>(0)
 export const usedRamAtom = atom<number>(0)
 
 export const cpuUsageAtom = atom<number>(0)
 
-export const gpusAtom = atom<Record<string, never>[]>([])
+export const gpusAtom = atom<GpuInfo[]>([])
 
 export const nvidiaTotalVramAtom = atom<number>(0)
 export const availableVramAtom = atom<number>(0)