Skip to content

feat: add devcontainer in the UI #16800

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 10 commits into from
Mar 4, 2025
Merged

feat: add devcontainer in the UI #16800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
df1cc95
feat: display devcontainer in the UI
BrunoQuaresma Mar 3, 2025
3da5874
Make UI prettuer
BrunoQuaresma Mar 3, 2025
9ad346e
Fmt
BrunoQuaresma Mar 3, 2025
20b55b7
Merge branch 'main' of https://github.com/coder/coder into bq/devcont…
BrunoQuaresma Mar 4, 2025
8b9119a
fix terminal and devcontainer links
BrunoQuaresma Mar 4, 2025
e9a4308
Apply suggestions from code review
BrunoQuaresma Mar 4, 2025
6edc3d0
Apply Cian's suggestions
BrunoQuaresma Mar 4, 2025
50cd58a
Merge branch 'bq/devcontainer' of https://github.com/coder/coder into…
BrunoQuaresma Mar 4, 2025
b6a36e3
Only show running containers
BrunoQuaresma Mar 4, 2025
4d30be3
Portforward only can be show if wildcardHostname is set
BrunoQuaresma Mar 4, 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
12 changes: 12 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2374,6 +2374,18 @@ class ApiMethods {
);
}
};

getAgentContainers = async (agentId: string, labels?: string[]) => {
const params = new URLSearchParams(
labels?.map((label) => ["label", label]),
);

const res =
await this.axios.get<TypesGen.WorkspaceAgentListContainersResponse>(
`/api/v2/workspaceagents/${agentId}/containers?${params.toString()}`,
);
return res.data;
};
}

// This is a hard coded CSRF token/cookie pair for local development. In prod,
Expand Down
74 changes: 74 additions & 0 deletions site/src/modules/resources/AgentDevcontainerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import Link from "@mui/material/Link";
import type { Workspace, WorkspaceAgentDevcontainer } from "api/typesGenerated";
import { ExternalLinkIcon } from "lucide-react";
import type { FC } from "react";
import { portForwardURL } from "utils/portForward";
import { AgentButton } from "./AgentButton";
import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
import { TerminalLink } from "./TerminalLink/TerminalLink";

type AgentDevcontainerCardProps = {
container: WorkspaceAgentDevcontainer;
workspace: Workspace;
wildcardHostname: string;
agentName: string;
};

export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
container,
workspace,
agentName,
wildcardHostname,
}) => {
return (
<section
className="border border-border border-dashed rounded p-6 "
key={container.id}
>
<header className="flex justify-between">
<h3 className="m-0 text-xs font-medium text-content-secondary">
{container.name}
</h3>

<AgentDevcontainerSSHButton
workspace={workspace.name}
container={container.name}
/>
</header>

<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about removing this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally like that. I would think on removing it later on when we have more things to display on the screen.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it could be a little smaller? This is just a nit though, and I'm totally fine with leaving it as-is.


<div className="flex gap-4 flex-wrap mt-4">
<TerminalLink
workspaceName={workspace.name}
agentName={agentName}
containerName={container.name}
userName={workspace.owner_name}
/>
{wildcardHostname !== "" &&
container.ports.map((port) => {
return (
<Link
key={port.port}
color="inherit"
component={AgentButton}
underline="none"
startIcon={<ExternalLinkIcon className="size-icon-sm" />}
href={portForwardURL(
wildcardHostname,
port.port,
agentName,
workspace.name,
workspace.owner_name,
location.protocol === "https" ? "https" : "http",
)}
>
{port.process_name ||
`${port.port}/${port.network.toUpperCase()}`}
</Link>
);
})}
</div>
</section>
);
};
37 changes: 33 additions & 4 deletions site/src/modules/resources/AgentRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import Divider from "@mui/material/Divider";
import Skeleton from "@mui/material/Skeleton";
import { API } from "api/api";
import { xrayScan } from "api/queries/integrations";
import type {
Template,
Expand All @@ -25,6 +26,7 @@ import {
import { useQuery } from "react-query";
import AutoSizer from "react-virtualized-auto-sizer";
import type { FixedSizeList as List, ListOnScrollProps } from "react-window";
import { AgentDevcontainerCard } from "./AgentDevcontainerCard";
import { AgentLatency } from "./AgentLatency";
import { AGENT_LOG_LINE_HEIGHT } from "./AgentLogs/AgentLogLine";
import { AgentLogs } from "./AgentLogs/AgentLogs";
Expand All @@ -35,7 +37,7 @@ import { AgentVersion } from "./AgentVersion";
import { AppLink } from "./AppLink/AppLink";
import { DownloadAgentLogsButton } from "./DownloadAgentLogsButton";
import { PortForwardButton } from "./PortForwardButton";
import { SSHButton } from "./SSHButton/SSHButton";
import { AgentSSHButton } from "./SSHButton/SSHButton";
import { TerminalLink } from "./TerminalLink/TerminalLink";
import { VSCodeDesktopButton } from "./VSCodeDesktopButton/VSCodeDesktopButton";
import { XRayScanAlert } from "./XRayScanAlert";
Expand Down Expand Up @@ -152,6 +154,18 @@ export const AgentRow: FC<AgentRowProps> = ({
setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
}, []);

const { data: containers } = useQuery({
queryKey: ["agents", agent.id, "containers"],
queryFn: () =>
// Only return devcontainers
API.getAgentContainers(agent.id, [
"devcontainer.config_file=",
"devcontainer.local_folder=",
]),
enabled: agent.status === "connected",
select: (res) => res.containers.filter((c) => c.status === "running"),
});

return (
<Stack
key={agent.id}
Expand Down Expand Up @@ -191,14 +205,13 @@ export const AgentRow: FC<AgentRowProps> = ({
{showBuiltinApps && (
<div css={{ display: "flex" }}>
{!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
<SSHButton
<AgentSSHButton
workspaceName={workspace.name}
agentName={agent.name}
sshPrefix={sshPrefix}
/>
)}
{proxy.preferredWildcardHostname &&
proxy.preferredWildcardHostname !== "" &&
{proxy.preferredWildcardHostname !== "" &&
agent.display_apps.includes("port_forwarding_helper") && (
<PortForwardButton
host={proxy.preferredWildcardHostname}
Expand Down Expand Up @@ -267,6 +280,22 @@ export const AgentRow: FC<AgentRowProps> = ({
</section>
)}

{containers && containers.length > 0 && (
<section className="flex flex-col gap-4">
{containers.map((container) => {
return (
<AgentDevcontainerCard
key={container.id}
container={container}
workspace={workspace}
wildcardHostname={proxy.preferredWildcardHostname}
agentName={agent.name}
/>
);
})}
</section>
)}

<AgentMetadata
storybookMetadata={storybookAgentMetadata}
agent={agent}
Expand Down
10 changes: 5 additions & 5 deletions site/src/modules/resources/SSHButton/SSHButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import type { Meta, StoryObj } from "@storybook/react";
import { userEvent, within } from "@storybook/test";
import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities";
import { withDesktopViewport } from "testHelpers/storybook";
import { SSHButton } from "./SSHButton";
import { AgentSSHButton } from "./SSHButton";

const meta: Meta<typeof SSHButton> = {
title: "modules/resources/SSHButton",
component: SSHButton,
const meta: Meta<typeof AgentSSHButton> = {
title: "modules/resources/AgentSSHButton",
component: AgentSSHButton,
};

export default meta;
type Story = StoryObj<typeof SSHButton>;
type Story = StoryObj<typeof AgentSSHButton>;

export const Closed: Story = {
args: {
Expand Down
54 changes: 52 additions & 2 deletions site/src/modules/resources/SSHButton/SSHButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import { type ClassName, useClassName } from "hooks/useClassName";
import type { FC } from "react";
import { docs } from "utils/docs";

export interface SSHButtonProps {
export interface AgentSSHButtonProps {
workspaceName: string;
agentName: string;
sshPrefix?: string;
}

export const SSHButton: FC<SSHButtonProps> = ({
export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
workspaceName,
agentName,
sshPrefix,
Expand Down Expand Up @@ -82,6 +82,56 @@ export const SSHButton: FC<SSHButtonProps> = ({
);
};

export interface AgentDevcontainerSSHButtonProps {
workspace: string;
container: string;
}

export const AgentDevcontainerSSHButton: FC<
AgentDevcontainerSSHButtonProps
> = ({ workspace, container }) => {
const paper = useClassName(classNames.paper, []);

return (
<Popover>
<PopoverTrigger>
<Button
size="small"
variant="text"
endIcon={<KeyboardArrowDown />}
css={{ fontSize: 13, padding: "8px 12px" }}
>
Connect via SSH
</Button>
</PopoverTrigger>

<PopoverContent horizontal="right" classes={{ paper }}>
<HelpTooltipText>
Run the following commands to connect with SSH:
</HelpTooltipText>

<ol style={{ margin: 0, padding: 0 }}>
<Stack spacing={0.5} css={styles.codeExamples}>
<SSHStep
helpText="Connect to the container:"
codeExample={`coder ssh ${workspace} -c ${container}`}
/>
</Stack>
</ol>

<HelpTooltipLinksGroup>
<HelpTooltipLink href={docs("/install")}>
Install Coder CLI
</HelpTooltipLink>
<HelpTooltipLink href={docs("/user-guides/workspace-access#ssh")}>
SSH configuration
</HelpTooltipLink>
</HelpTooltipLinksGroup>
</PopoverContent>
</Popover>
);
};

interface SSHStepProps {
helpText: string;
codeExample: string;
Expand Down
14 changes: 10 additions & 4 deletions site/src/modules/resources/TerminalLink/TerminalLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ export const Language = {
};

export interface TerminalLinkProps {
agentName?: TypesGen.WorkspaceAgent["name"];
userName?: TypesGen.User["username"];
workspaceName: TypesGen.Workspace["name"];
workspaceName: string;
agentName?: string;
userName?: string;
containerName?: string;
}

/**
Expand All @@ -27,11 +28,16 @@ export const TerminalLink: FC<TerminalLinkProps> = ({
agentName,
userName = "me",
workspaceName,
containerName,
}) => {
const params = new URLSearchParams();
if (containerName) {
params.append("container", containerName);
}
// Always use the primary for the terminal link. This is a relative link.
const href = `/@${userName}/${workspaceName}${
agentName ? `.${agentName}` : ""
}/terminal`;
}/terminal?${params.toString()}`;

return (
<Link
Expand Down
Loading