-
{isGPUInfoLoaded && gpuList.length > 0 && }
+
{isCPUInfoLoaded && cpuInfo && }
+
{isGPUInfoLoaded && gpuList.length > 0 && }
diff --git a/ui/src/hooks/useCPUInfo.tsx b/ui/src/hooks/useCPUInfo.tsx
new file mode 100644
index 00000000..913b749d
--- /dev/null
+++ b/ui/src/hooks/useCPUInfo.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { CpuInfo } from '@/types';
+import { useEffect, useState } from 'react';
+import { apiClient } from '@/utils/api';
+
+export default function useCPUInfo(reloadInterval: null | number = null) {
+ const [cpuInfo, setCpuInfo] = useState
(null);
+ const [isCPUInfoLoaded, setIsLoaded] = useState(false);
+ const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+ const fetchCpuInfo = async () => {
+ setStatus('loading');
+ try {
+ const data: CpuInfo = await apiClient.get('/api/cpu').then(res => res.data);
+ setCpuInfo(data);
+ setStatus('success');
+ } catch (err) {
+ console.error(`Failed to fetch CPU data: ${err instanceof Error ? err.message : String(err)}`);
+ setStatus('error');
+ } finally {
+ setIsLoaded(true);
+ }
+ };
+
+ useEffect(() => {
+ // Fetch immediately on component mount
+ fetchCpuInfo();
+
+ // Set up interval if specified
+ if (reloadInterval) {
+ const interval = setInterval(() => {
+ fetchCpuInfo();
+ }, reloadInterval);
+
+ // Cleanup interval on unmount
+ return () => {
+ clearInterval(interval);
+ };
+ }
+ }, [reloadInterval]); // Added dependencies
+
+ return { cpuInfo, isCPUInfoLoaded, status, refreshCpuInfo: fetchCpuInfo };
+}
diff --git a/ui/src/types.ts b/ui/src/types.ts
index 71048ca5..ba55d8da 100644
--- a/ui/src/types.ts
+++ b/ui/src/types.ts
@@ -39,6 +39,16 @@ export interface GpuInfo {
fan: GpuFan;
}
+export interface CpuInfo {
+ name: string;
+ cores: number;
+ temperature: number;
+ totalMemory: number;
+ freeMemory: number;
+ availableMemory: number;
+ currentLoad: number;
+}
+
export interface GPUApiResponse {
hasNvidiaSmi: boolean;
gpus: GpuInfo[];