Skip to content

Commit 3cd1788

Browse files
TheArchonsTheArchons
committed
Replace GPU chart with a chart of multiple different components. Also minor fixes.
1 parent c480f7b commit 3cd1788

3 files changed

Lines changed: 89 additions & 76 deletions

File tree

‎web-interface/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"@tailwindcss/typography": "^0.5.16",
3030
"@tanstack/devtools-vite": "latest",
3131
"@tanstack/eslint-config": "latest",
32-
"@tanstack/router-plugin": "latest",
3332
"@testing-library/dom": "^10.4.1",
3433
"@testing-library/react": "^16.3.0",
3534
"@types/node": "^22.10.2",

‎web-interface/src/routes/jobs.tsx‎

Lines changed: 88 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,42 @@ export const Route = createFileRoute('/jobs')({
1212
component: JobsPage,
1313
})
1414

15-
// Sample GPU utilization data (24 data points for 24 hours)
16-
function generateGpuData(): number[] {
17-
return Array.from({ length: 25 }, (_, i) => {
18-
if (i < 6) return 5 + Math.random() * 10
19-
if (i < 10) return 10 + Math.random() * 20
20-
if (i < 14) return 50 + Math.random() * 45
21-
if (i < 18) return 70 + Math.random() * 25
22-
return 30 + Math.random() * 30
23-
})
15+
// Sample utilization data
16+
type UsageData = {
17+
component: string // Component that we observe. E.g. GPU, CPU, etc.
18+
observations: number[]
19+
}
20+
21+
function generateUsageData(): UsageData {
22+
const components = ['GPU', 'CPU', 'RAM']
23+
24+
return {
25+
component: components[Math.floor(Math.random() * components.length)], // of course these should be ordered, but this is sample data. When we use the real Grafana data we will throw this out anyway.
26+
observations: Array.from({ length: 25 }, (_, i) => {
27+
if (i < 6) return 5 + Math.random() * 10
28+
if (i < 10) return 10 + Math.random() * 20
29+
if (i < 14) return 50 + Math.random() * 45
30+
if (i < 18) return 70 + Math.random() * 25
31+
return 30 + Math.random() * 30
32+
}),
33+
}
34+
}
35+
36+
export type Job = {
37+
id: string
38+
name: string
39+
created: string
40+
accessed: string
41+
machine: string
42+
gpu: string
43+
cpu: string
44+
dockerImage: string
45+
ip: string
46+
ram: string
47+
diskUsage: string
48+
cpuUtilization: string
49+
networkIO: { down: string; up: string }
50+
usageHistory: UsageData[]
2451
}
2552

2653
const sampleJobs: Job[] = [
@@ -38,12 +65,12 @@ const sampleJobs: Job[] = [
3865
diskUsage: '70GB/128GB (55%)',
3966
cpuUtilization: '95%',
4067
networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
41-
gpuHistory: [
42-
generateGpuData(),
43-
generateGpuData(),
44-
generateGpuData(),
45-
generateGpuData(),
46-
generateGpuData(),
68+
usageHistory: [
69+
generateUsageData(),
70+
generateUsageData(),
71+
generateUsageData(),
72+
generateUsageData(),
73+
generateUsageData(),
4774
],
4875
},
4976
{
@@ -60,12 +87,12 @@ const sampleJobs: Job[] = [
6087
diskUsage: '70GB/128GB (55%)',
6188
cpuUtilization: '95%',
6289
networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
63-
gpuHistory: [
64-
generateGpuData(),
65-
generateGpuData(),
66-
generateGpuData(),
67-
generateGpuData(),
68-
generateGpuData(),
90+
usageHistory: [
91+
generateUsageData(),
92+
generateUsageData(),
93+
generateUsageData(),
94+
generateUsageData(),
95+
generateUsageData(),
6996
],
7097
},
7198
{
@@ -82,12 +109,12 @@ const sampleJobs: Job[] = [
82109
diskUsage: '70GB/128GB (55%)',
83110
cpuUtilization: '95%',
84111
networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
85-
gpuHistory: [
86-
generateGpuData(),
87-
generateGpuData(),
88-
generateGpuData(),
89-
generateGpuData(),
90-
generateGpuData(),
112+
usageHistory: [
113+
generateUsageData(),
114+
generateUsageData(),
115+
generateUsageData(),
116+
generateUsageData(),
117+
generateUsageData(),
91118
],
92119
},
93120
{
@@ -104,33 +131,16 @@ const sampleJobs: Job[] = [
104131
diskUsage: '70GB/128GB (55%)',
105132
cpuUtilization: '95%',
106133
networkIO: { down: '1.2 GB/s', up: '340 MB/s' },
107-
gpuHistory: [
108-
generateGpuData(),
109-
generateGpuData(),
110-
generateGpuData(),
111-
generateGpuData(),
112-
generateGpuData(),
134+
usageHistory: [
135+
generateUsageData(),
136+
generateUsageData(),
137+
generateUsageData(),
138+
generateUsageData(),
139+
generateUsageData(),
113140
],
114141
},
115142
]
116143

117-
export type Job = {
118-
id: string
119-
name: string
120-
created: string
121-
accessed: string
122-
machine: string
123-
gpu: string
124-
cpu: string
125-
dockerImage: string
126-
ip: string
127-
ram: string
128-
diskUsage: string
129-
cpuUtilization: string
130-
networkIO: { down: string; up: string }
131-
gpuHistory: number[][] // array of [hour, percentage] data points per GPU
132-
}
133-
134144
type JobCardProps = {
135145
job: Job
136146
onStart: (id: string) => void
@@ -139,16 +149,16 @@ type JobCardProps = {
139149
onDelete: (id: string) => void
140150
}
141151

142-
function GpuChart({
152+
function Chart({
143153
data,
144-
gpuIndex,
145-
totalGpus,
154+
index,
155+
numComponents,
146156
onPrev,
147157
onNext,
148158
}: {
149-
data: number[]
150-
gpuIndex: number
151-
totalGpus: number
159+
data: UsageData
160+
index: number
161+
numComponents: number
152162
onPrev: () => void
153163
onNext: () => void
154164
}) {
@@ -162,8 +172,8 @@ function GpuChart({
162172
const chartW = width - padLeft - padRight
163173
const chartH = height - padTop - padBottom
164174

165-
const points = data.map((val, i) => {
166-
const x = padLeft + (i / (data.length - 1)) * chartW
175+
const points = data.observations.map((val, i) => {
176+
const x = padLeft + (i / (data.observations.length - 1)) * chartW
167177
const y = padTop + chartH - (val / max) * chartH
168178
return `${x},${y}`
169179
})
@@ -195,12 +205,14 @@ function GpuChart({
195205

196206
return (
197207
<div className="mt-4">
198-
<h3 className="text-center font-semibold text-sm mb-1">GPU</h3>
208+
<h3 className="text-center font-semibold text-sm mb-1">
209+
{data.component}
210+
</h3>
199211
<div className="flex items-center gap-2">
200212
<button
201213
onClick={onPrev}
202214
className="text-gray-400 hover:text-main p-1"
203-
aria-label="Previous GPU"
215+
aria-label="Previous Component"
204216
>
205217
<ChevronLeft size={24} />
206218
</button>
@@ -259,17 +271,17 @@ function GpuChart({
259271
<button
260272
onClick={onNext}
261273
className="text-gray-400 hover:text-main p-1"
262-
aria-label="Next GPU"
274+
aria-label="Next Component"
263275
>
264276
<ChevronRight size={24} />
265277
</button>
266278
</div>
267279
{/* Pagination dots */}
268280
<div className="flex justify-center gap-1.5 mt-1">
269-
{Array.from({ length: totalGpus }).map((_, i) => (
281+
{Array.from({ length: numComponents }).map((_, i) => (
270282
<span
271283
key={i}
272-
className={`w-2 h-2 rounded-full ${i === gpuIndex ? 'bg-main' : 'bg-gray-300'}`}
284+
className={`w-2 h-2 rounded-full ${i === index ? 'bg-main' : 'bg-gray-300'}`}
273285
/>
274286
))}
275287
</div>
@@ -284,11 +296,13 @@ function JobCard({
284296
onRestart,
285297
onDelete,
286298
}: JobCardProps) {
287-
const [gpuIndex, setGpuIndex] = useState(0)
288-
const totalGpus = job.gpuHistory.length
299+
const [componentIndex, setComponentIndex] = useState(0)
300+
const totalComponents = job.usageHistory.length
289301

290-
const prevGpu = () => setGpuIndex((i) => (i - 1 + totalGpus) % totalGpus)
291-
const nextGpu = () => setGpuIndex((i) => (i + 1) % totalGpus)
302+
const prevComponent = () =>
303+
setComponentIndex((i) => (i - 1 + totalComponents) % totalComponents)
304+
const nextComponent = () =>
305+
setComponentIndex((i) => (i + 1) % totalComponents)
292306

293307
return (
294308
<Card>
@@ -317,13 +331,13 @@ function JobCard({
317331
<CardInfoField label="RAM" value={job.ram} />
318332
</div>
319333

320-
{/* GPU Chart */}
321-
<GpuChart
322-
data={job.gpuHistory[gpuIndex]}
323-
gpuIndex={gpuIndex}
324-
totalGpus={totalGpus}
325-
onPrev={prevGpu}
326-
onNext={nextGpu}
334+
{/* Component Usage Chart */}
335+
<Chart
336+
data={job.usageHistory[componentIndex]}
337+
index={componentIndex}
338+
numComponents={totalComponents}
339+
onPrev={prevComponent}
340+
onNext={nextComponent}
327341
/>
328342
</Card>
329343
)

‎web-interface/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"**/*.tsx",
55
"eslint.config.js",
66
"prettier.config.js",
7-
"vite.config.js"
7+
"vite.config.ts"
88
],
99

1010
"compilerOptions": {

0 commit comments

Comments
 (0)