chore: refactor watch system resource hook (#2048)

web/containers/Layout/BottomBar/index.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+
 import {
   Badge,
   Button,
@@ -31,6 +33,11 @@ import { useMainViewState } from '@/hooks/useMainViewState'
 
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+import {
+  cpuUsageAtom,
+  gpusAtom,
+  ramUtilitizedAtom,
+} from '@/helpers/atoms/SystemBar.atom'
 
 const menuLinks = [
   {
@@ -47,9 +54,12 @@ const menuLinks = [
 
 const BottomBar = () => {
   const { activeModel, stateModel } = useActiveModel()
-  const { ram, cpu, gpus } = useGetSystemResources()
+  const { watch, stopWatching } = useGetSystemResources()
   const progress = useAtomValue(appDownloadProgress)
   const downloadedModels = useAtomValue(downloadedModelsAtom)
+  const gpus = useAtomValue(gpusAtom)
+  const cpu = useAtomValue(cpuUsageAtom)
+  const ramUtilitized = useAtomValue(ramUtilitizedAtom)
 
   const { setMainViewState } = useMainViewState()
   const downloadStates = useAtomValue(modelDownloadStateAtom)
@@ -67,6 +77,16 @@ const BottomBar = () => {
     return sum
   }
 
+  useEffect(() => {
+    // Watch for resource update
+    watch()
+
+    return () => {
+      stopWatching()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
       <div className="flex flex-shrink-0 items-center gap-x-2">
@@ -127,7 +147,7 @@ const BottomBar = () => {
       <div className="flex items-center gap-x-3">
         <div className="flex items-center gap-x-2">
           <SystemItem name="CPU:" value={`${cpu}%`} />
-          <SystemItem name="Mem:" value={`${ram}%`} />
+          <SystemItem name="Mem:" value={`${ramUtilitized}%`} />
         </div>
         {gpus.length > 0 && (
           <Tooltip>

web/containers/Providers/DataLoader.tsx

@@ -3,6 +3,7 @@
 import { Fragment, ReactNode } from 'react'
 
 import useAssistants from '@/hooks/useAssistants'
+import useGetSystemResources from '@/hooks/useGetSystemResources'
 import useModels from '@/hooks/useModels'
 import useThreads from '@/hooks/useThreads'
 
@@ -14,6 +15,8 @@ const DataLoader: React.FC<Props> = ({ children }) => {
   useModels()
   useThreads()
   useAssistants()
+  useGetSystemResources()
+  console.debug('Load Data...')
 
   return <Fragment>{children}</Fragment>
 }

web/containers/Providers/EventHandler.tsx

@@ -282,11 +282,9 @@ export default function EventHandler({ children }: { children: ReactNode }) {
   }
 
   useEffect(() => {
-    console.log('Registering events')
     if (window.core?.events) {
       events.on(MessageEvent.OnMessageResponse, onNewMessageResponse)
       events.on(MessageEvent.OnMessageUpdate, onMessageResponseUpdate)
-
       events.on(ModelEvent.OnModelReady, onModelReady)
       events.on(ModelEvent.OnModelFail, onModelInitFailed)
       events.on(ModelEvent.OnModelStopped, onModelStopped)

web/containers/Providers/EventListener.tsx

@@ -41,14 +41,14 @@ const EventListenerWrapper = ({ children }: PropsWithChildren) => {
   )
 
   useEffect(() => {
-    console.log('EventListenerWrapper: registering event listeners...')
+    console.debug('EventListenerWrapper: registering event listeners...')
 
     events.on(DownloadEvent.onFileDownloadUpdate, onFileDownloadUpdate)
     events.on(DownloadEvent.onFileDownloadError, onFileDownloadError)
     events.on(DownloadEvent.onFileDownloadSuccess, onFileDownloadSuccess)
 
     return () => {
-      console.log('EventListenerWrapper: unregistering event listeners...')
+      console.debug('EventListenerWrapper: unregistering event listeners...')
       events.off(DownloadEvent.onFileDownloadUpdate, onFileDownloadUpdate)
       events.off(DownloadEvent.onFileDownloadError, onFileDownloadError)
       events.off(DownloadEvent.onFileDownloadSuccess, onFileDownloadSuccess)

web/helpers/atoms/SystemBar.atom.ts

@@ -2,8 +2,10 @@ import { atom } from 'jotai'
 
 export const totalRamAtom = atom<number>(0)
 export const usedRamAtom = atom<number>(0)
-export const availableRamAtom = atom<number>(0)
 
 export const cpuUsageAtom = atom<number>(0)
+export const ramUtilitizedAtom = atom<number>(0)
+
+export const gpusAtom = atom<Record<string, never>[]>([])
 
 export const nvidiaTotalVramAtom = atom<number>(0)

web/hooks/useGetSystemResources.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { ExtensionTypeEnum, MonitoringExtension } from '@janhq/core'
 
@@ -6,25 +6,27 @@ import { useSetAtom } from 'jotai'
 
 import { extensionManager } from '@/extension/ExtensionManager'
 import {
-  availableRamAtom,
   cpuUsageAtom,
   totalRamAtom,
   usedRamAtom,
   nvidiaTotalVramAtom,
+  gpusAtom,
+  ramUtilitizedAtom,
 } from '@/helpers/atoms/SystemBar.atom'
 
 export default function useGetSystemResources() {
-  const [ram, setRam] = useState<number>(0)
+  const [intervalId, setIntervalId] = useState<
-  const [cpu, setCPU] = useState<number>(0)
+    NodeJS.Timeout | number | undefined
+  >(undefined)
 
-  const [gpus, setGPUs] = useState<Record<string, never>[]>([])
   const setTotalRam = useSetAtom(totalRamAtom)
+  const setGpus = useSetAtom(gpusAtom)
   const setUsedRam = useSetAtom(usedRamAtom)
-  const setAvailableRam = useSetAtom(availableRamAtom)
   const setCpuUsage = useSetAtom(cpuUsageAtom)
   const setTotalNvidiaVram = useSetAtom(nvidiaTotalVramAtom)
+  const setRamUtilitized = useSetAtom(ramUtilitizedAtom)
 
-  const getSystemResources = async () => {
+  const getSystemResources = useCallback(async () => {
     if (
       !extensionManager.get<MonitoringExtension>(
         ExtensionTypeEnum.SystemMonitoring
@@ -38,23 +40,20 @@ export default function useGetSystemResources() {
     const resourceInfor = await monitoring?.getResourcesInfo()
     const currentLoadInfor = await monitoring?.getCurrentLoad()
 
-    const ram =
-      (resourceInfor?.mem?.usedMemory ?? 0) /
-      (resourceInfor?.mem?.totalMemory ?? 1)
     if (resourceInfor?.mem?.usedMemory) setUsedRam(resourceInfor.mem.usedMemory)
     if (resourceInfor?.mem?.totalMemory)
       setTotalRam(resourceInfor.mem.totalMemory)
 
-    setRam(Math.round(ram * 100))
+    const ramUtilitized =
-    if (resourceInfor.mem.totalMemory && resourceInfor.mem.usedMemory)
+      ((resourceInfor?.mem?.usedMemory ?? 0) /
-      setAvailableRam(
+        (resourceInfor?.mem?.totalMemory ?? 1)) *
-        resourceInfor.mem.totalMemory - resourceInfor.mem.usedMemory
+      100
-      )
+    setRamUtilitized(Math.round(ramUtilitized))
-    setCPU(Math.round(currentLoadInfor?.cpu?.usage ?? 0))
+
     setCpuUsage(Math.round(currentLoadInfor?.cpu?.usage ?? 0))
 
     const gpus = currentLoadInfor?.gpu ?? []
-    setGPUs(gpus)
+    setGpus(gpus)
 
     let totalNvidiaVram = 0
     if (gpus.length > 0) {
@@ -65,27 +64,49 @@ export default function useGetSystemResources() {
       )
     }
     setTotalNvidiaVram(totalNvidiaVram)
-  }
+  }, [
+    setUsedRam,
+    setTotalRam,
+    setRamUtilitized,
+    setCpuUsage,
+    setGpus,
+    setTotalNvidiaVram,
+  ])
 
-  useEffect(() => {
+  const watch = () => {
     getSystemResources()
 
     // Fetch interval - every 2s
-    // TODO: Will we really need this?
+    const itv = setInterval(() => {
-    // There is a possibility that this will be removed and replaced by the process event hook?
-    const intervalId = setInterval(() => {
       getSystemResources()
-    }, 5000)
+    }, 2000)
+    setIntervalId(itv)
+  }
+  const stopWatching = useCallback(() => {
+    if (intervalId) clearInterval(intervalId)
+  }, [intervalId])
 
-    // clean up interval
+  useEffect(() => {
-    return () => clearInterval(intervalId)
+    getSystemResources()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Component did unmount
-  }, [])
+    // Stop watching if any
+    return () => {
+      stopWatching()
+    }
+  }, [getSystemResources, stopWatching])
 
   return {
-    totalRamAtom,
+    /**
-    ram,
+     * Fetch resource informations once
-    cpu,
+     */
-    gpus,
+    getSystemResources,
+    /**
+     *  Fetch & watch for resource update
+     */
+    watch,
+    /**
+     *  Stop watching
+     */
+    stopWatching,
   }
 }