8000 feat: add provisioner jobs into the UI by BrunoQuaresma · Pull Request #16867 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: add provisioner jobs into the UI #16867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 14, 2025
Merged

feat: add provisioner jobs into the UI #16867

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e1ebb3
feat: add provisioner jobs
BrunoQuaresma Mar 6, 2025
d931c4a
Add tests and refactor location
BrunoQuaresma Mar 10, 2025
2abe99b
Merge branch 'main' of https://github.com/coder/coder into bq/provisi…
BrunoQuaresma Mar 10, 2025
912cd8f
FMT
BrunoQuaresma Mar 10, 2025
a56246f
Apply Kaylas suggestions
BrunoQuaresma Mar 12, 2025
8a62ecc
Apply Kaylas suggestion
BrunoQuaresma Mar 13, 2025
901ab23
Remove injection
BrunoQuaresma Mar 14, 2025
ed73594
FMT
BrunoQuaresma Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add tests and refactor location
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Mar 10, 2025
commit d931c4a8b7dd702a4c0ec69039b033e4012a8bac
7 changes: 5 additions & 2 deletions site/src/api/queries/organizations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,13 @@ export const provisionerJobQueryKey = (orgId: string) => [
"provisionerjobs",
];

export const provisionerJobs = (orgId: string) => {
export const provisionerJobs = (
orgId: string,
fetchProvisionerJobs = API.getProvisionerJobs,
) => {
return {
queryKey: provisionerJobQueryKey(orgId),
queryFn: () => API.getProvisionerJobs(orgId),
queryFn: () => fetchProvisionerJobs(orgId),
};
};

Expand Down
13 changes: 8 additions & 5 deletions site/src/modules/management/OrganizationSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const OrganizationSettingsContext = createContext<
OrganizationSettingsValue | undefined
>(undefined);

type OrganizationSettingsValue = Readonly<{
export type OrganizationSettingsValue = Readonly<{
organizations: readonly Organization[];
organizationPermissionsByOrganizationId: Record<
string,
Expand All @@ -34,19 +34,22 @@ type OrganizationSettingsValue = Readonly<{
organizationPermissions?: OrganizationPermissions;
}>;

export const useOrganizationSettings = (): OrganizationSettingsValue => {
const context = useContext(OrganizationSettingsContext);
export const useOrganizationSettings = (
defaultValues?: OrganizationSettingsValue,
): OrganizationSettingsValue => {
const context = useContext(OrganizationSettingsContext) ?? defaultValues;

if (!context) {
throw new Error(
"useOrganizationSettings should be used inside of OrganizationSettingsLayout",
"useOrganizationSettings should be used inside of OrganizationSettingsLayout or with the default values in case of testing.",
);
}

return context;
};

const OrganizationSettingsLayout: FC = () => {
const { organizations, showOrganizations } = useDashboard();
const { organizations } = useDashboard();
const { organization: orgName } = useParams() as {
organization?: string;
};
Expand Down
4 changes: 2 additions & 2 deletions ...visionersPage/CancelJobButton.stories.tsx → ...ionerJobsPage/CancelJobButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MockProvisionerJob } from "testHelpers/entities";
import { CancelJobButton } from "./CancelJobButton";

const meta: Meta<typeof CancelJobButton> = {
title: "pages/OrganizationSettingsPage/ProvisionersPage/CancelJobButton",
title: "pages/OrganizationProvisionerJobsPage/CancelJobButton",
component: CancelJobButton,
args: {
job: {
Expand All @@ -28,7 +28,7 @@ export const NotCancellable: Story = {
},
};

export const OnClick: Story = {
export const ConfirmOnClick: Story = {
parameters: {
chromatic: { disableSnapshot: true },
},
Expand Down
0 ...Page/ProvisionersPage/CancelJobButton.tsx → ...onProvisionerJobsPage/CancelJobButton.tsx
View file
Open in desktop
File renamed without changes.
7 changes: 3 additions & 4 deletions ...e/CancelJobConfirmationDialog.stories.tsx → ...e/CancelJobConfirmationDialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { withGlobalSnackbar } from "testHelpers/storybook";
import { CancelJobConfirmationDialog } from "./CancelJobConfirmationDialog";

const meta: Meta<typeof CancelJobConfirmationDialog> = {
title:
"pages/OrganizationSettingsPage/ProvisionersPage/CancelJobConfirmationDialog",
title: "pages/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog",
component: CancelJobConfirmationDialog,
args: {
open: true,
Expand Down Expand Up @@ -40,7 +39,7 @@ export const OnCancel: Story = {
},
};

export const onConfirmSuccess: Story = {
export const OnConfirmSuccess: Story = {
parameters: {
chromatic: { disableSnapshot: true },
},
Expand All @@ -60,7 +59,7 @@ export const onConfirmSuccess: Story = {
},
};

export const onConfirmFailure: Story = {
export const OnConfirmFailure: Story = {
parameters: {
chromatic: { disableSnapshot: true },
},
Expand Down
0 ...onersPage/CancelJobConfirmationDialog.tsx → ...rJobsPage/CancelJobConfirmationDialog.tsx
View file
Open in desktop
File renamed without changes.
100 changes: 100 additions & 0 deletions site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import type { Meta, StoryObj } from "@storybook/react";
import { daysAgo } from "utils/time";
import { userEvent, waitFor, within, expect } from "@storybook/test";
import { JobRow } from "./JobRow";
import { Table, TableBody } from "components/Table/Table";

const meta: Meta<typeof JobRow> = {
title: "pages/OrganizationProvisionerJobsPage/JobRow",
component: JobRow,
args: {
job: {
id: "373cb47a-c33b-4e35-83bf-23c64fde0293",
created_at: daysAgo(2),
started_at: "2025-03-09T08:01:22.118677Z",
completed_at: "2025-03-09T08:01:33.310184Z",
status: "succeeded",
worker_id: "d4f5452e-3d1b-4400-a7c1-233c2dee6f1a",
file_id: "a99685a6-4441-4258-8102-f07e571204fb",
tags: {
cluster: "dogfood-v2",
env: "gke",
owner: "",
scope: "organization",
},
queue_position: 0,
queue_size: 24,
organization_id: "703f72a1-76f6-4f89-9de6-8a3989693fe5",
input: {
workspace_build_id: "0153584a-6cbe-4c90-8e9e-4ffb40fd1069",
},
type: "workspace_build",
metadata: {
template_version_name: "54745b1",
template_id: "0d286645-29aa-4eaf-9b52-cc5d2740c90b",
template_name: "coder",
template_display_name: "Write Coder on Coder",
template_icon: "/emojis/1f3c5.png",
workspace_id: "e1a7f977-28e7-4567-b91a-179a14c3658b",
workspace_name: "nowjosias",
},
},
},
render: (args) => {
return (
<Table>
<TableBody>
<JobRow {...args} />
</TableBody>
</Table>
);
},
};

export default meta;
type Story = StoryObj<typeof JobRow>;

export const Close: Story = {};

export const Open: Story = {
args: {
defaultOpen: true,
},
};

export const OpenOnClick: Story = {
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
const showMoreButton = canvas.getByRole("button", { name: /show more/i });

await userEvent.click(showMoreButton);

const jobId = canvas.getByText(args.job.id);
expect(jobId).toBeInTheDocument();
},
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};

export const HideOnClick: Story = {
args: {
defaultOpen: true,
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
const showMoreButton = canvas.getByRole("button", { name: /hide/i });

await userEvent.click(showMoreButton);

const jobId = canvas.queryByText(args.job.id);
expect(jobId).not.toBeInTheDocument();
},
parameters: {
chromatic: {
disableSnapshot: true,
},
},
};
121 changes: 14 additions & 107 deletions .../ProvisionersPage/ProvisionerJobsPage.tsx → ...rganizationProvisionerJobsPage/JobRow.tsx
View file
Open in desktop
< 10000 td class="blob-code blob-code-deletion js-file-line"> import { Link } from "components/Link/Link";
Original file line number Diff line number Diff line change
@@ -1,124 +1,27 @@
import { provisionerJobs } from "api/queries/organizations";
import type { ProvisionerJob } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { Badge } from "components/Badge/Badge";
import { Button } from "components/Button/Button";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Loader } from "components/Loader/Loader";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "components/Table/Table";
import {
ChevronDownIcon,
ChevronRightIcon,
TriangleAlertIcon,
} from "lucide-react";
import { type FC, useState } from "react";
import { useQuery } from "react-query";
import { cn } from "utils/cn";
import { docs } from "utils/docs";
import { relativeTime } from "utils/time";
import { CancelJobButton } from "./CancelJobButton";
import { DataGrid } from "./DataGrid";
import { JobStatusIndicator } from "./JobStatusIndicator";
import { Tag, Tags, TruncateTags } from "./Tags";
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";

const ProvisionerJobsPage: FC = () => {
const { organization } = useOrganizationSettings();

if (!organization) {
return <EmptyState message="Organization not found" />;
}

const {
data: jobs,
isLoadingError,
refetch,
} = useQuery(provisionerJobs(organization?.id));

return (
<>
<Helmet>
<title>
{pageTitle(
"Provisioner Jobs",
organization.display_name || organization.name,
)}
</title>
</Helmet>
<section className="flex flex-col gap-8">
<header className="flex flex-row items-baseline justify-between">
<div className="flex flex-col gap-2">
<h1 className="text-3xl m-0">Provisioner Jobs</h1>
<p className="text-sm text-content-secondary m-0">
Provisioner Jobs are the individual tasks assigned to Provisioners
when the workspaces are being built.{" "}
<Link href={docs("/admin/provisioners")}>View docs</Link>
</p>
</div>
</header>

<Table>
<TableHeader>
<TableRow>
<TableHead>Created</TableHead>
<TableHead>Type</TableHead>
<TableHead>Template</TableHead>
<TableHead>Tags</TableHead>
<TableHead>Status</TableHead>
<TableHead />
</TableRow>
</TableHeader>
<TableBody>
{jobs ? (
jobs.length > 0 ? (
jobs.map((j) => <JobRow key={j.id} job={j} />)
) : (
<TableRow>
<TableCell colSpan={999}>
<EmptyState message="No provisioner jobs found" />
</TableCell>
</TableRow>
)
) : isLoadingError ? (
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message="Error loading the provisioner jobs"
cta={<Button onClick={() => refetch()}>Retry</Button>}
/>
</TableCell>
</TableRow>
) : (
<TableRow>
<TableCell colSpan={999}>
<Loader />
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</section>
</>
);
};
import { TableCell, TableRow } from "components/Table/Table";
import { Avatar } from "components/Avatar/Avatar";
import { Badge } from "components/Badge/Badge";

type JobRowProps = {
job: ProvisionerJob;
defaultOpen?: boolean;
};

const JobRow: FC<JobRowProps> = ({ job }) => {
export const JobRow: FC<JobRowProps> = ({ job, defaultOpen }) => {
const metadata = job.metadata;
const [isOpen, setIsOpen] = useState(false);
const [isOpen, setIsOpen] = useState(defaultOpen);

return (
<>
Expand Down Expand Up @@ -186,7 +89,13 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
<span className="[&:first-letter]:uppercase">{job.error}</span>
</div>
)}
<DataGrid>
<dl
className={cn([
"text-xs text-content-secondary",
"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px] [&_dt]:font-medium",
])}
>
<dt>Job ID:</dt>
<dd>{job.id}</dd>

Expand Down Expand Up @@ -219,12 +128,10 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
))}
</Tags>
</dd>
</DataGrid>
</dl>
</TableCell>
</TableRow>
)}
</>
);
};

export default ProvisionerJobsPage;
Loading
0