Skip to content

Commit b6430bb

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Set base structure to display the provisioner jobs
1 parent c8ef7eb commit b6430bb

File tree

5 files changed

+126
-7
lines changed

5 files changed

+126
-7
lines changed

‎site/src/components/Badge/Badge.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ import type { FC } from "react";
77
import { cn } from "utils/cn";
88

99
export const badgeVariants = cva(
10-
"inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
10+
"inline-flex items-center rounded-md border px-2 py-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
1111
{
1212
variants: {
1313
variant: {
1414
default:
1515
"border-transparent bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
1616
},
17+
size: {
18+
sm: "text-2xs font-regular",
19+
md: "text-xs font-medium",
20+
},
1721
},
1822
defaultVariants: {
1923
variant: "default",
24+
size: "md",
2025
},
2126
},
2227
);
@@ -25,8 +30,16 @@ export interface BadgeProps
2530
extends React.HTMLAttributes<HTMLDivElement>,
2631
VariantProps<typeof badgeVariants> {}
2732

28-
export const Badge: FC<BadgeProps> = ({ className, variant, ...props }) => {
33+
export const Badge: FC<BadgeProps> = ({
34+
className,
35+
variant,
36+
size,
37+
...props
38+
}) => {
2939
return (
30-
<div className={cn(badgeVariants({ variant }), className)} {...props} />
40+
<div
41+
className={cn(badgeVariants({ variant, size }), className)}
42+
{...props}
43+
/>
3144
);
3245
};

‎site/src/components/Button/Button.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { cn } from "utils/cn";
99

1010
export const buttonVariants = cva(
1111
`inline-flex items-center justify-center gap-1 whitespace-nowrap
12-
border-solid rounded-md transition-colors min-w-20
12+
border-solid rounded-md transition-colors
1313
text-sm font-semibold font-medium cursor-pointer no-underline
1414
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
1515
disabled:pointer-events-none disabled:text-content-disabled
@@ -28,9 +28,9 @@ export const buttonVariants = cva(
2828
},
2929

3030
size: {
31-
lg: "h-10 px-3 py-2 [&_svg]:size-icon-lg",
32-
sm: "h-[30px] px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
33-
icon: "h-[30px] min-w-[30px] px-1 py-1.5 [&_svg]:size-icon-sm",
31+
lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg",
32+
sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
33+
icon: "size-8 px-1.5 [&_svg]:size-icon-sm",
3434
},
3535
},
3636
defaultVariants: {

‎site/src/modules/management/DeploymentSidebarView.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ export const DeploymentSidebarView: FC<DeploymentSidebarViewProps> = ({
9494
IdP Organization Sync
9595
</SidebarNavItem>
9696
)}
97+
{permissions.viewDeploymentValues && (
98+
<SidebarNavItem href="/deployment/provisioners">
99+
Provisioners
100+
</SidebarNavItem>
101+
)}
97102
{!hasPremiumLicense && (
98103
<SidebarNavItem href="/deployment/premium">Premium</SidebarNavItem>
99104
)}

‎site/src/pages/DeploymentSettingsPage/ProvisionersPage/ProvisionersPage.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { AvatarFallback } from "@radix-ui/react-avatar";
2+
import type { ProvisionerJob } from "api/typesGenerated";
3+
import { Avatar } from "components/Avatar/Avatar";
4+
import { Badge } from "components/Badge/Badge";
5+
import { Button } from "components/Button/Button";
6+
import { Link } from "components/Link/Link";
7+
import {
8+
Table,
9+
TableBody,
10+
TableCell,
11+
TableHead,
12+
TableHeader,
13+
TableRow,
14+
} from "components/Table/Table";
15+
import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
16+
import { BanIcon } from "lucide-react";
17+
import type { FC } from "react";
18+
import { docs } from "utils/docs";
19+
20+
export const ProvisionersPage: FC = () => {
21+
return (
22+
<div className="flex flex-col gap-12">
23+
<header className="flex flex-row items-baseline justify-between">
24+
<div className="flex flex-col gap-2">
25+
<h1 className="text-3xl m-0">Provisioners</h1>
26+
</div>
27+
</header>
28+
29+
<main>
30+
<Tabs active="jobs">
31+
<TabsList>
32+
<TabLink value="jobs" to="?tab=jobs">
33+
Jobs
34+
</TabLink>
35+
<TabLink value="daemons" to="?tab=daemons">
36+
Daemons
37+
</TabLink>
38+
</TabsList>
39+
</Tabs>
40+
41+
<div className="mt-6">
42+
<JobsTabContent />
43+
</div>
44+
</main>
45+
</div>
46+
);
47+
};
48+
49+
const JobsTabContent: FC = () => {
50+
return (
51+
<section className="flex flex-col gap-8">
52+
<p className="text-sm text-content-secondary m-0 mt-2">
53+
Provisioner Jobs are the individual tasks assigned to Provisioners when
54+
the workspaces are being built.{" "}
55+
<Link href={docs("/admin/provisioners")}>View docs</Link>
56+
</p>
57+
58+
<Table>
59+
<TableHeader>
60+
<TableRow>
61+
<TableHead>Last seen</TableHead>
62+
<TableHead>Name</TableHead>
63+
<TableHead>Template</TableHead>
64+
<TableHead>Tags</TableHead>
65+
<TableHead>Status</TableHead>
66+
</TableRow>
67+
</TableHeader>
68+
<TableBody>
69+
<TableRow>
70+
<TableCell>5 min ago</TableCell>
71+
<TableCell>
72+
<Badge size="sm">workspace_build</Badge>
73+
</TableCell>
74+
<TableCell>
75+
<div className="flex items-center gap-1">
76+
<Avatar fallback="CD" />
77+
Write Coder on Coder
78+
</div>
79+
</TableCell>
80+
<TableCell>
81+
<Badge size="sm">[foo=bar]</Badge>
82+
</TableCell>
83+
<TableCell>Completed</TableCell>
84+
<TableCell className="text-right">
85+
<Button aria-label="Cancel job" size="icon" variant="outline">
86+
<BanIcon />
87+
</Button>
88+
</TableCell>
89+
</TableRow>
90+
</TableBody>
91+
</Table>
92+
</section>
93+
);
94+
};
95+
96+
export default ProvisionersPage;

‎site/src/router.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,10 @@ const ChangePasswordPage = lazy(
304304
const IdpOrgSyncPage = lazy(
305305
() => import("./pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage"),
306306
);
307+
const ProvisionersPage = lazy(
308+
() =>
309+
import("./pages/DeploymentSettingsPage/ProvisionersPage/ProvisionersPage"),
310+
);
307311

308312
const RoutesWithSuspense = () => {
309313
return (
@@ -452,6 +456,7 @@ export const router = createBrowserRouter(
452456
/>
453457
<Route path="idp-org-sync" element={<IdpOrgSyncPage />} />
454458
<Route path="premium" element={<PremiumPage />} />
459+
<Route path="provisioners" element={<ProvisionersPage />} />
455460
</Route>
456461

457462
<Route path="licenses">

0 commit comments

Comments
 (0)