Skip to content

Commit c480f7b

Browse files
TheArchonsTheArchons
committed
prettier
1 parent b51f2fc commit c480f7b

13 files changed

Lines changed: 150 additions & 102 deletions

File tree

‎web-interface/.cta.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,5 @@
1111
"routerOnly": true,
1212
"version": 1,
1313
"framework": "react",
14-
"chosenAddOns": [
15-
"eslint"
16-
]
17-
}
14+
"chosenAddOns": ["eslint"]
15+
}

‎web-interface/README.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Welcome to your new TanStack Start app!
1+
Welcome to your new TanStack Start app!
22

33
# Getting Started
44

@@ -40,7 +40,6 @@ If you prefer not to use Tailwind CSS:
4040

4141
## Linting & Formatting
4242

43-
4443
This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
4544

4645
```bash
@@ -49,8 +48,6 @@ bun --bun run format
4948
bun --bun run check
5049
```
5150

52-
53-
5451
## Routing
5552

5653
This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
@@ -68,7 +65,7 @@ Now that you have two routes you can use a `Link` component to navigate between
6865
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
6966

7067
```tsx
71-
import { Link } from "@tanstack/react-router";
68+
import { Link } from '@tanstack/react-router'
7269
```
7370

7471
Then anywhere in your JSX you can use it like so:
@@ -136,11 +133,11 @@ const getServerTime = createServerFn({
136133
// Use in a component
137134
function MyComponent() {
138135
const [time, setTime] = useState('')
139-
136+
140137
useEffect(() => {
141138
getServerTime().then(setTime)
142139
}, [])
143-
140+
144141
return <div>Server time: {time}</div>
145142
}
146143
```

‎web-interface/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!doctype html>
32
<html lang="en">
43
<head>

‎web-interface/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,4 @@
4949
"lightningcss"
5050
]
5151
}
52-
}
52+
}

‎web-interface/prettier.config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const config = {
55
semi: false,
66
singleQuote: true,
7-
trailingComma: "all",
8-
};
7+
trailingComma: 'all',
8+
}
99

10-
export default config;
10+
export default config

‎web-interface/src/components/Buttons.tsx‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
1-
export function ButtonSuccess({ onClick, text } : { onClick: () => void, text: string }) {
1+
export function ButtonSuccess({
2+
onClick,
3+
text,
4+
}: {
5+
onClick: () => void
6+
text: string
7+
}) {
28
return (
39
<button
410
onClick={onClick}
511
className="px-3 py-1 text-xs font-semibold rounded bg-green-200 text-green-800 hover:bg-green-300"
612
>
7-
{ text }
13+
{text}
814
</button>
915
)
1016
}
1117

12-
export function ButtonWarning({ onClick, text } : { onClick: () => void, text: string }) {
18+
export function ButtonWarning({
19+
onClick,
20+
text,
21+
}: {
22+
onClick: () => void
23+
text: string
24+
}) {
1325
return (
1426
<button
1527
onClick={onClick}
1628
className="px-3 py-1 text-xs font-semibold rounded bg-yellow-200 text-yellow-800 hover:bg-yellow-300"
1729
>
18-
{ text }
30+
{text}
1931
</button>
2032
)
2133
}
2234

23-
export function ButtonDanger({ onClick, text } : { onClick: () => void, text: string }) {
35+
export function ButtonDanger({
36+
onClick,
37+
text,
38+
}: {
39+
onClick: () => void
40+
text: string
41+
}) {
2442
return (
2543
<button
2644
onClick={onClick}
2745
className="px-3 py-1 text-xs font-semibold rounded bg-red-200 text-red-800 hover:bg-red-300"
2846
>
29-
{ text }
47+
{text}
3048
</button>
3149
)
32-
}
50+
}

‎web-interface/src/components/Card.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { Link } from '@tanstack/react-router'
2-
import type {ReactNode} from "react";
3-
2+
import type { ReactNode } from 'react'
43

54
export function CardInfoField({
6-
label,
7-
value,
8-
link,
9-
}: {
5+
label,
6+
value,
7+
link,
8+
}: {
109
label: string
1110
value: string
1211
link?: string
@@ -25,22 +24,24 @@ export function CardInfoField({
2524
)
2625
}
2726

28-
export function CardHeader({ header, children }: { header: string, children: ReactNode }) {
27+
export function CardHeader({
28+
header,
29+
children,
30+
}: {
31+
header: string
32+
children: ReactNode
33+
}) {
2934
return (
3035
<div className="flex items-center justify-between mb-4">
3136
<h2 className="text-lg font-bold">{header}</h2>
3237
<div className="flex gap-2">
3338
{/* Actions */}
34-
{ children }
39+
{children}
3540
</div>
3641
</div>
3742
)
3843
}
3944

4045
export default function Card({ children }: { children: ReactNode }) {
41-
return (
42-
<div className="border border-gray-200 rounded-xl p-5">
43-
{ children }
44-
</div>
45-
)
46+
return <div className="border border-gray-200 rounded-xl p-5">{children}</div>
4647
}

‎web-interface/src/components/Navbar.tsx‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,79 @@
1-
import {Link} from "@tanstack/react-router";
2-
import type {LinkProps} from "@tanstack/react-router";
3-
import {getUser, logout} from "#/util.ts";
4-
import {useState} from "react";
1+
import { Link } from '@tanstack/react-router'
2+
import type { LinkProps } from '@tanstack/react-router'
3+
import { getUser, logout } from '#/util.ts'
4+
import { useState } from 'react'
55

66
type NavlinkProps = {
7-
href: LinkProps['to'];
8-
text: string;
7+
href: LinkProps['to']
8+
text: string
99
}
1010

1111
function Navlink(props: NavlinkProps) {
1212
return (
13-
<Link className="hover:text-main transition-colors duration-200 py-1 px-2 rounded-lg hover:bg-gray-100" to={props.href} inactiveProps={{ className: "text-gray" }}>
14-
{ props.text }
13+
<Link
14+
className="hover:text-main transition-colors duration-200 py-1 px-2 rounded-lg hover:bg-gray-100"
15+
to={props.href}
16+
inactiveProps={{ className: 'text-gray' }}
17+
>
18+
{props.text}
1519
</Link>
1620
)
1721
}
1822

1923
export default function Navbar() {
20-
const [dropdown, setDropdown] = useState(false);
21-
const user = getUser();
24+
const [dropdown, setDropdown] = useState(false)
25+
const user = getUser()
2226

2327
return (
2428
<nav className="flex items-center text-lg border rounded-xl mx-auto mt-8 mb-4 px-8 py-2 w-fit gap-8">
2529
<div className="flex gap-8">
26-
<Navlink href="/dashboard" text="Dashboard"/>
27-
<Navlink href="/machines" text="Machines"/>
28-
<Navlink href="/jobs" text="Jobs"/>
30+
<Navlink href="/dashboard" text="Dashboard" />
31+
<Navlink href="/machines" text="Machines" />
32+
<Navlink href="/jobs" text="Jobs" />
2933
</div>
3034
<div className="relative">
31-
<div className="flex items-center cursor-pointer py-1 px-2 rounded-lg hover:bg-gray-100 transition-colors duration-200" onClick={() => setDropdown(!dropdown)}>
32-
{ user.username }
33-
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
34-
<path d="M12 15L7 10H17L12 15Z" fill="#1D1B20"/>
35+
<div
36+
className="flex items-center cursor-pointer py-1 px-2 rounded-lg hover:bg-gray-100 transition-colors duration-200"
37+
onClick={() => setDropdown(!dropdown)}
38+
>
39+
{user.username}
40+
<svg
41+
className="w-5 h-5"
42+
viewBox="0 0 24 24"
43+
fill="none"
44+
xmlns="http://www.w3.org/2000/svg"
45+
>
46+
<path d="M12 15L7 10H17L12 15Z" fill="#1D1B20" />
3547
</svg>
36-
<img src={ user.profilePicture } alt="Profile Picture" className="w-7 h-7 rounded-full"></img>
48+
<img
49+
src={user.profilePicture}
50+
alt="Profile Picture"
51+
className="w-7 h-7 rounded-full"
52+
></img>
3753
</div>
38-
{ dropdown &&
39-
<div className="absolute top-full right-0 border rounded-b m-2 p-1 pr-3 pl-3 text-xl bg-white">
40-
<ul>
41-
<li><Link to="/profile" className="block px-2 py-1 rounded hover:bg-gray-100 transition-colors duration-200">Profile</Link></li>
42-
<li><button onClick={logout} className="block w-full text-left px-2 py-1 rounded hover:bg-gray-100 transition-colors duration-200">Logout</button></li>
43-
</ul>
54+
{dropdown && (
55+
<div className="absolute top-full right-0 border rounded-b m-2 p-1 pr-3 pl-3 text-xl bg-white">
56+
<ul>
57+
<li>
58+
<Link
59+
to="/profile"
60+
className="block px-2 py-1 rounded hover:bg-gray-100 transition-colors duration-200"
61+
>
62+
Profile
63+
</Link>
64+
</li>
65+
<li>
66+
<button
67+
onClick={logout}
68+
className="block w-full text-left px-2 py-1 rounded hover:bg-gray-100 transition-colors duration-200"
69+
>
70+
Logout
71+
</button>
72+
</li>
73+
</ul>
4474
</div>
45-
}
75+
)}
4676
</div>
4777
</nav>
4878
)
49-
}
79+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
33
import { TanStackDevtools } from '@tanstack/react-devtools'
44

55
import '../styles.css'
6-
import Navbar from "#/components/Navbar.tsx";
6+
import Navbar from '#/components/Navbar.tsx'
77

88
export const Route = createRootRoute({
99
component: RootComponent,

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

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import {createFileRoute} from '@tanstack/react-router'
2-
import Card, {CardHeader, CardInfoField} from '#/components/Card.tsx'
3-
import {ChevronLeft, ChevronRight} from "lucide-react";
4-
import {useState} from "react";
5-
import {ButtonDanger, ButtonSuccess, ButtonWarning} from "#/components/Buttons.tsx";
1+
import { createFileRoute } from '@tanstack/react-router'
2+
import Card, { CardHeader, CardInfoField } from '#/components/Card.tsx'
3+
import { ChevronLeft, ChevronRight } from 'lucide-react'
4+
import { useState } from 'react'
5+
import {
6+
ButtonDanger,
7+
ButtonSuccess,
8+
ButtonWarning,
9+
} from '#/components/Buttons.tsx'
610

711
export const Route = createFileRoute('/jobs')({
812
component: JobsPage,
@@ -136,12 +140,12 @@ type JobCardProps = {
136140
}
137141

138142
function GpuChart({
139-
data,
140-
gpuIndex,
141-
totalGpus,
142-
onPrev,
143-
onNext,
144-
}: {
143+
data,
144+
gpuIndex,
145+
totalGpus,
146+
onPrev,
147+
onNext,
148+
}: {
145149
data: number[]
146150
gpuIndex: number
147151
totalGpus: number
@@ -274,12 +278,12 @@ function GpuChart({
274278
}
275279

276280
function JobCard({
277-
job,
278-
onStart,
279-
onShutdown,
280-
onRestart,
281-
onDelete,
282-
}: JobCardProps) {
281+
job,
282+
onStart,
283+
onShutdown,
284+
onRestart,
285+
onDelete,
286+
}: JobCardProps) {
283287
const [gpuIndex, setGpuIndex] = useState(0)
284288
const totalGpus = job.gpuHistory.length
285289

@@ -303,11 +307,7 @@ function JobCard({
303307
<CardInfoField label="Accessed" value={job.accessed} />
304308
<CardInfoField label="GPU" value={job.gpu} />
305309
<CardInfoField label="CPU Utilization" value={job.cpuUtilization} />
306-
<CardInfoField
307-
label="Docker Image"
308-
value={job.dockerImage}
309-
link="#"
310-
/>
310+
<CardInfoField label="Docker Image" value={job.dockerImage} link="#" />
311311
<CardInfoField label="CPU" value={job.cpu} />
312312
<CardInfoField
313313
label="Network I/O"

0 commit comments

Comments
 (0)