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 5 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
8 changes: 8 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,14 @@ class ApiMethods {
);
}
};

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

// This is a hard coded CSRF token/cookie pair for local development. In prod,
Expand Down
73 changes: 73 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,73 @@
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;
host: string;
agentName: string;
};

export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
container,
workspace,
agentName,
host,
}) => {
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}
/>
{container.ports.map((port) => {
return (
<Link
key={port.port}
color="inherit"
component={AgentButton}
underline="none"
startIcon={<ExternalLinkIcon className="size-icon-sm" />}
href={portForwardURL(
Copy link
Member

Choose a reason for hiding this comment

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

I think we should only show portForwardURL if wildcard hostname is set. Otherwise you get a URL like http://localhost:12345 which won't work.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Fixed ✅

host,
port.port,
agentName,
workspace.name,
workspace.owner_name,
location.protocol === "https" ? "https" : "http",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@johnstcn should we return the port protocol in the response? Here, I'm just using whatever the user is currently using in the UI but maybe, some apps use HTTP instead of HTTPS... I'm not sure if it makes sense tho 🤔

Copy link
Member

Choose a reason for hiding this comment

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

I think it's always going to be the same protocol as the Coder deployment?

If not, we can get that from portAttributes: https://containers.dev/implementors/json_reference/#port-attributes

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 think it's always going to be the same protocol as the Coder deployment?

I'm not sure but would be safest to rely in the devcontainer config.

)}
>
{port.process_name ||
`${port.port}/${port.network.toUpperCase()}`}
</Link>
);
})}
</div>
</section>
);
};
29 changes: 27 additions & 2 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,13 @@ export const AgentRow: FC<AgentRowProps> = ({
setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
}, []);

const { data: containers } = useQuery({
queryKey: ["agents", agent.id, "containers"],
queryFn: () => API.getAgentContainers(agent.id),
enabled: agent.status === "connected",
select: (res) => res.containers,
});

return (
<Stack
key={agent.id}
Expand Down Expand Up @@ -191,7 +200,7 @@ 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}
Expand Down Expand Up @@ -267,6 +276,22 @@ export const AgentRow: FC<AgentRowProps> = ({
</section>
)}

{containers && (
<section>
{containers.map((container) => {
return (
<AgentDevcontainerCard
key={container.id}
container={container}
workspace={workspace}
host={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
58 changes: 56 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,60 @@ 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="Configure SSH hosts on machine:"
codeExample="coder config-ssh"
/>
<SSHStep
helpText="Connect to the agent:"
codeExample={`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