- Notifications
You must be signed in to change notification settings - Fork929
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.
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
Uh oh!
There was an error while loading.Please reload this page.
Changes from6 commits
df1cc953da58749ad346e20b55b78b9119ae9a43086edc3d050cd58ab6a36e34d30be3File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }; | ||
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
| } | ||
| // This is a hard coded CSRF token/cookie pair for local development. In prod, | ||
| 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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. What do you think about removing this? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. I think we should only show There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Fixed ✅ | ||
| host, | ||
BrunoQuaresma marked this conversation as resolved. Show resolvedHide resolvedUh oh!There was an error while loading.Please reload this page. | ||
| port.port, | ||
| agentName, | ||
| workspace.name, | ||
| workspace.owner_name, | ||
| location.protocol === "https" ? "https" : "http", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 🤔 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more.
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> | ||
| ); | ||
| }; | ||
Uh oh!
There was an error while loading.Please reload this page.