Add cpu info the the job page

ui/src/app/api/cpu/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import si from 'systeminformation';
+import { CpuInfo } from '@/types';
+
+export async function GET() {
+  try {
+    const cpuInfoRaw = await si.cpu();
+    const memoryData = await si.mem();
+    let cpuInfo: CpuInfo = {
+      name: `${cpuInfoRaw.manufacturer} ${cpuInfoRaw.brand}`,
+      cores: cpuInfoRaw.cores,
+      temperature: (await si.cpuTemperature()).main || 0,
+      totalMemory: memoryData.total / (1024 * 1024),
+      availableMemory: memoryData.available / (1024 * 1024),
+      freeMemory: memoryData.free / (1024 * 1024),
+      currentLoad: (await si.currentLoad()).currentLoad || 0,
+    };
+
+    return NextResponse.json(cpuInfo);
+  } catch (error) {
+    console.error('Error fetching CPU stats:', error);
+    return NextResponse.json(
+      {
+        error: `Failed to fetch CPU stats: ${error instanceof Error ? error.message : String(error)}`,
+      },
+      { status: 500 },
+    );
+  }
+}

ui/src/components/CPUWidget.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { CpuInfo } from '@/types';
+import { Thermometer, Zap, Clock, HardDrive, Fan, Cpu } from 'lucide-react';
+
+interface CPUWidgetProps {
+  cpu: CpuInfo | null;
+}
+
+export default function CPUWidget({ cpu }: CPUWidgetProps) {
+  const formatMemory = (mb: number): string => {
+    return mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`;
+  };
+
+  const getUtilizationColor = (value: number): string => {
+    return value < 30 ? 'bg-emerald-500' : value < 70 ? 'bg-amber-500' : 'bg-rose-500';
+  };
+
+  const getTemperatureColor = (temp: number): string => {
+    return temp < 50 ? 'text-emerald-500' : temp < 80 ? 'text-amber-500' : 'text-rose-500';
+  };
+
+  if (!cpu) {
+    return (
+      <div className="bg-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-800">
+        <div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <h2 className="font-semibold text-gray-100">CPU Info</h2>
+          </div>
+        </div>
+        <div className="p-4">
+          <p className="text-sm text-gray-400">No CPU data available</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-800">
+      <div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <h2 className="font-semibold text-gray-100">{cpu.name}</h2>
+          {/* <span className="px-2 py-0.5 bg-gray-700 rounded-full text-xs text-gray-300">#{1}</span> */}
+        </div>
+      </div>
+
+      <div className="p-4 space-y-4">
+        {/* Temperature, Fan, and Utilization Section */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="">
+            <div className="flex items-center space-x-2 mb-1 mt-1">
+              <Cpu className="w-4 h-4 text-gray-400" />
+              <p className="text-xs text-gray-400">CPU Load</p>
+              <span className="text-xs text-gray-300 ml-auto">{cpu.currentLoad.toFixed(1)}%</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-1">
+              <div
+                className={`h-1 rounded-full transition-all ${getUtilizationColor(cpu.currentLoad)}`}
+                style={{ width: `${cpu.currentLoad}%` }}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="flex items-center space-x-2 mb-1 mt-1">
+              <HardDrive className="w-4 h-4 text-blue-400" />
+              <p className="text-xs text-gray-400">Memory</p>
+              <span className="text-xs text-gray-300 ml-auto">
+                {(((cpu.totalMemory - cpu.availableMemory) / cpu.totalMemory) * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-1">
+              <div
+                className="h-1 rounded-full bg-blue-500 transition-all"
+                style={{ width: `${((cpu.totalMemory - cpu.availableMemory) / cpu.totalMemory) * 100}%` }}
+              />
+            </div>
+            <p className="text-xs text-gray-400 mt-0.5">
+              {formatMemory(cpu.totalMemory - cpu.availableMemory)} / {formatMemory(cpu.totalMemory)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/src/components/JobOverview.tsx

@@ -1,6 +1,8 @@
 import { Job } from '@prisma/client';
 import useGPUInfo from '@/hooks/useGPUInfo';
+import useCPUInfo from '@/hooks/useCPUInfo';
 import GPUWidget from '@/components/GPUWidget';
+import CPUWidget from '@/components/CPUWidget';
 import FilesWidget from '@/components/FilesWidget';
 import { getTotalSteps } from '@/utils/jobs';
 import { Cpu, HardDrive, Info, Gauge } from 'lucide-react';
@@ -19,6 +21,7 @@ export default function JobOverview({ job }: JobOverviewProps) {
   const [isScrolledToBottom, setIsScrolledToBottom] = useState(true);
 
   const { gpuList, isGPUInfoLoaded } = useGPUInfo(gpuIds, 5000);
+  const { cpuInfo, isCPUInfoLoaded } = useCPUInfo(5000);
   const totalSteps = getTotalSteps(job);
   const progress = (job.step / totalSteps) * 100;
   const isStopping = job.stop && job.status === 'running';
@@ -154,7 +157,8 @@ export default function JobOverview({ job }: JobOverviewProps) {
 
       {/* GPU Widget Panel */}
       <div className="col-span-1">
-        <div>{isGPUInfoLoaded && gpuList.length > 0 && <GPUWidget gpu={gpuList[0]} />}</div>
+        <div>{isCPUInfoLoaded && cpuInfo && <CPUWidget cpu={cpuInfo} />}</div>
+        <div className="mt-4">{isGPUInfoLoaded && gpuList.length > 0 && <GPUWidget gpu={gpuList[0]} />}</div>
         <div className="mt-4">
           <FilesWidget jobID={job.id} />
         </div>

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<CpuInfo | null>(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 };
+}

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[];