github/ai-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add cpu info the the job page

Browse Source
This commit is contained in:
Jaret Burkett
2025-10-07 08:30:23 -06:00
parent c9f982af83
commit 1ea50d8590
7 changed files with 228 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
ui/src/components/CPUWidget.tsx Normal file
View File

@@ -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>
);
}

6
ui/src/components/JobOverview.tsx
View File

@@ -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>