Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 8 commits intomainfrombq/provisioner-jobs
Mar 14, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
2 changes: 1 addition & 1 deletionsite/src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@ export const badgeVariants = cva(
variants: {
variant: {
default:
"border-transparent bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
"border-transparent bg-surface-secondary text-content-secondary shadow",
},
size: {
sm: "text-2xs font-regular",
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,7 +24,7 @@ export const OrganizationSettingsContext = createContext<
OrganizationSettingsValue | undefined
>(undefined);

type OrganizationSettingsValue = Readonly<{
exporttype OrganizationSettingsValue = Readonly<{
organizations: readonly Organization[];
organizationPermissionsByOrganizationId: Record<
string,
Expand All@@ -36,9 +36,10 @@ type OrganizationSettingsValue = Readonly<{

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

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.",
);
}

Expand Down
17 changes: 12 additions & 5 deletionssite/src/modules/management/OrganizationSidebarView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -186,11 +186,18 @@ const OrganizationSettingsNavigation: FC<
)}
{orgPermissions.viewProvisioners &&
orgPermissions.viewProvisionerJobs && (
<SettingsSidebarNavItem
href={urlForSubpage(organization.name, "provisioners")}
>
Provisioners
</SettingsSidebarNavItem>
<>
<SettingsSidebarNavItem
href={urlForSubpage(organization.name, "provisioners")}
>
Provisioners
</SettingsSidebarNavItem>
<SettingsSidebarNavItem
href={urlForSubpage(organization.name, "provisioner-jobs")}
>
Provisioner Jobs
</SettingsSidebarNavItem>
</>
)}
{orgPermissions.viewIdpSyncSettings && (
<SettingsSidebarNavItem
Expand Down
Original file line numberDiff line numberDiff 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 constOnClick: Story = {
export constConfirmOnClick: Story = {
parameters: {
chromatic: { disableSnapshot: true },
},
Expand Down
Original file line numberDiff line numberDiff 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 DownExpand Up@@ -40,7 +39,7 @@ export const OnCancel: Story = {
},
};

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

export constonConfirmFailure: Story = {
export constOnConfirmFailure: Story = {
parameters: {
chromatic: { disableSnapshot: true },
},
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
import type { Meta, StoryObj } from "@storybook/react";
import { expect, userEvent, waitFor, within } from "@storybook/test";
import { Table, TableBody } from "components/Table/Table";
import { MockProvisionerJob } from "testHelpers/entities";
import { daysAgo } from "utils/time";
import { JobRow } from "./JobRow";

const meta: Meta<typeof JobRow> = {
title: "pages/OrganizationProvisionerJobsPage/JobRow",
component: JobRow,
args: {
job: {
...MockProvisionerJob,
created_at: daysAgo(2),
},
},
render: (args) => {
return (
<Table>
<TableBody>
<JobRow {...args} />
</TableBody>
</Table>
);
},
};

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

export const Close: Story = {};

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();
},
};

export const HideOnClick: Story = {
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);

const showMoreButton = canvas.getByRole("button", { name: /show more/i });
await userEvent.click(showMoreButton);

const hideButton = canvas.getByRole("button", { name: /hide/i });
await userEvent.click(hideButton);

const jobId = canvas.queryByText(args.job.id);
expect(jobId).not.toBeInTheDocument();
},
};
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,24 @@
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 { Link } from "components/Link/Link";
import { Loader } from "components/Loader/Loader";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "components/Table/Table";
import { TableCell, 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";

type ProvisionerJobsPageProps = {
orgId: string;
};

export const ProvisionerJobsPage: FC<ProvisionerJobsPageProps> = ({
orgId,
}) => {
const {
data: jobs,
isLoadingError,
refetch,
} = useQuery(provisionerJobs(orgId));

return (
<section className="flex flex-col gap-8">
<h2 className="sr-only">Provisioner jobs</h2>
<p className="text-sm text-content-secondary m-0 mt-2">
Provisioner Jobs are the individual tasks assigned to Provisioners when
the workspaces are being built.{" "}
<Link href={docs("/admin/provisioners")}>View docs</Link>
</p>

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

type JobRowProps = {
job: ProvisionerJob;
};

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

Expand DownExpand Up@@ -133,20 +52,16 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
<Badge size="sm">{job.type}</Badge>
</TableCell>
<TableCell>
{job.metadata.template_name ? (
<div className="flex items-center gap-1 whitespace-nowrap">
<Avatar
variant="icon"
src={metadata.template_icon}
fallback={
metadata.template_display_name || metadata.template_name
}
/>
{metadata.template_display_name ?? metadata.template_name}
</div>
) : (
<span className="whitespace-nowrap">Not linked</span>
)}
<div className="flex items-center gap-1 whitespace-nowrap">
<Avatar
variant="icon"
src={metadata.template_icon}
fallback={
metadata.template_display_name || metadata.template_name
}
/>
{metadata.template_display_name || metadata.template_name}
</div>
</TableCell>
<TableCell>
<TruncateTags tags={job.tags} />
Expand All@@ -173,7 +88,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 DownExpand Up@@ -206,7 +127,7 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
))}
</Tags>
</dd>
</DataGrid>
</dl>
</TableCell>
</TableRow>
)}
Expand Down
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
import type { Meta, StoryObj } from "@storybook/react";
import { MockProvisionerJob } from "testHelpers/entities";
import { JobStatusIndicator } from "./JobStatusIndicator";

const meta: Meta<typeof JobStatusIndicator> = {
title: "pages/OrganizationProvisionerJobsPage/JobStatusIndicator",
component: JobStatusIndicator,
};

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

export const Succeeded: Story = {
args: {
job: {
...MockProvisionerJob,
status: "succeeded",
},
},
};

export const Failed: Story = {
args: {
job: {
...MockProvisionerJob,
status: "failed",
},
},
};

export const Pending: Story = {
args: {
job: {
...MockProvisionerJob,
status: "pending",
queue_position: 1,
queue_size: 1,
},
},
};

export const Running: Story = {
args: {
job: {
...MockProvisionerJob,
status: "running",
},
},
};

export const Canceling: Story = {
args: {
job: {
...MockProvisionerJob,
status: "canceling",
},
},
};

export const Canceled: Story = {
args: {
job: {
...MockProvisionerJob,
status: "canceled",
},
},
};

export const Unknown: Story = {
args: {
job: {
...MockProvisionerJob,
status: "unknown",
},
},
};
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp