|
1 | 1 | import Link from "@mui/material/Link"; |
2 | | -import type { Workspace, WorkspaceAgentDevcontainer } from "api/typesGenerated"; |
| 2 | +import type { |
| 3 | + Workspace, |
| 4 | + WorkspaceAgentDevcontainer, |
| 5 | + WorkspaceAgentDevcontainerPort, |
| 6 | +} from "api/typesGenerated"; |
3 | 7 | import { ExternalLinkIcon } from "lucide-react"; |
4 | 8 | import type { FC } from "react"; |
5 | 9 | import { portForwardURL } from "utils/portForward"; |
6 | 10 | import { AgentButton } from "./AgentButton"; |
7 | 11 | import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton"; |
8 | 12 | import { TerminalLink } from "./TerminalLink/TerminalLink"; |
| 13 | +import Tooltip, { type TooltipProps } from "@mui/material/Tooltip"; |
9 | 14 |
|
10 | 15 | type AgentDevcontainerCardProps = { |
11 | 16 | container: WorkspaceAgentDevcontainer; |
@@ -47,25 +52,38 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({ |
47 | 52 | /> |
48 | 53 | {wildcardHostname !== "" && |
49 | 54 | container.ports.map((port) => { |
| 55 | + let portLabel = `${port.port}/${port.network.toUpperCase()}`; |
| 56 | + let hasHostBind = |
| 57 | + port.host_port !== undefined && |
| 58 | + port.host_port !== null && |
| 59 | + port.host_ip !== undefined && |
| 60 | + port.host_ip !== null; |
| 61 | + let helperText = hasHostBind |
| 62 | + ? `${port.host_ip}:${port.host_port}` |
| 63 | + : "Not bound to host"; |
50 | 64 | return ( |
51 | | - <Link |
52 | | - key={port.port} |
53 | | - color="inherit" |
54 | | - component={AgentButton} |
55 | | - underline="none" |
56 | | - startIcon={<ExternalLinkIcon className="size-icon-sm" />} |
57 | | - href={portForwardURL( |
58 | | - wildcardHostname, |
59 | | - port.port, |
60 | | - agentName, |
61 | | - workspace.name, |
62 | | - workspace.owner_name, |
63 | | - location.protocol === "https" ? "https" : "http", |
64 | | - )} |
65 | | - > |
66 | | - {port.process_name || |
67 | | - `${port.port}/${port.network.toUpperCase()}`} |
68 | | - </Link> |
| 65 | + <Tooltip key={portLabel} title={helperText}> |
| 66 | + <span> |
| 67 | + <Link |
| 68 | + key={portLabel} |
| 69 | + color="inherit" |
| 70 | + component={AgentButton} |
| 71 | + underline="none" |
| 72 | + startIcon={<ExternalLinkIcon className="size-icon-sm" />} |
| 73 | + disabled={!hasHostBind} |
| 74 | + href={portForwardURL( |
| 75 | + wildcardHostname, |
| 76 | + port.host_port!, |
| 77 | + agentName, |
| 78 | + workspace.name, |
| 79 | + workspace.owner_name, |
| 80 | + location.protocol === "https" ? "https" : "http", |
| 81 | + )} |
| 82 | + > |
| 83 | + {portLabel} |
| 84 | + </Link> |
| 85 | + </span> |
| 86 | + </Tooltip> |
69 | 87 | ); |
70 | 88 | })} |
71 | 89 | </div> |
|
0 commit comments