chore: add back GPU information to system monitoring bar (#3350)

* chore: add back GPU information to system monitoring bar

* update template name

* Update bug_report.md

---------

Co-authored-by: Van Pham <64197333+Van-QA@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
-name: _Bug report
+name: Report
 about: Create a report to help us improve Jan
-title: 'bug: [DESCRIPTION]'
+title: 'bug: '
 labels: 'type: bug'
 assignees: ''
 

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
+}

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",

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,18 @@ 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 +200,7 @@ 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 +209,17 @@ 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>

web/helpers/atoms/SystemBar.atom.ts

@@ -1,3 +1,4 @@
+import { GpuInfo } from '@janhq/core/.'
 import { atom } from 'jotai'
 
 export const totalRamAtom = atom<number>(0)
@@ -5,7 +6,7 @@ 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)