Skip to content

Commit 055fad4

Browse files
f0sself0ssel
committed
add query:
1 parent 5add77e commit 055fad4

File tree

7 files changed

+140
-95
lines changed

7 files changed

+140
-95
lines changed

‎site/src/api/api.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1163,6 +1163,15 @@ export const getAgentListeningPorts = async (
11631163
return response.data;
11641164
};
11651165

1166+
export const getWorkspaceAgentSharedPorts = async (
1167+
workspaceID: string,
1168+
): Promise<TypesGen.WorkspaceAgentPortShares> => {
1169+
const response = await axios.get(
1170+
`/api/v2/workspaces/${workspaceID}/shared-ports`,
1171+
);
1172+
return response.data;
1173+
};
1174+
11661175
// getDeploymentSSHConfig is used by the VSCode-Extension.
11671176
export const getDeploymentSSHConfig =
11681177
async (): Promise<TypesGen.SSHConfigResponse> => {

‎site/src/components/Popover/Popover.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export const PopoverContent: FC<PopoverContentProps> = ({
151151
marginTop: hoverMode ? undefined : 8,
152152
pointerEvents: hoverMode ? "none" : undefined,
153153
"& .MuiPaper-root": {
154-
minWidth: 520,
154+
minWidth: 320,
155155
fontSize: 14,
156156
pointerEvents: hoverMode ? "auto" : undefined,
157157
},

‎site/src/modules/resources/AgentRow.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export const AgentRow: FC<AgentRowProps> = ({
220220
workspaceName={workspace.name}
221221
agent={agent}
222222
username={workspace.owner_name}
223+
workspaceID={workspace.id}
223224
/>
224225
)}
225226
</div>

‎site/src/modules/resources/PortForwardButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof PortForwardButton>;
1919
export const Example: Story = {
2020
args: {
2121
storybook: {
22-
portsQueryData: MockListeningPortsResponse,
22+
listeningPortsQueryData: MockListeningPortsResponse,
2323
},
2424
},
2525
};

‎site/src/modules/resources/PortForwardButton.tsx

Lines changed: 107 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
66
import type { FC } from "react";
77
import { useQuery } from "react-query";
88
import { docs } from "utils/docs";
9-
import { getAgentListeningPorts } from "api/api";
9+
import { getAgentListeningPorts, getWorkspaceAgentSharedPorts } from "api/api";
1010
import type {
1111
WorkspaceAgent,
1212
WorkspaceAgentListeningPort,
1313
WorkspaceAgentListeningPortsResponse,
14+
WorkspaceAgentPortShare,
15+
WorkspaceAgentPortShares,
1416
} from "api/typesGenerated";
1517
import { portForwardURL } from "utils/portForward";
1618
import { type ClassName, useClassName } from "hooks/useClassName";
1719
import {
1820
HelpTooltipLink,
19-
HelpTooltipLinksGroup,
2021
HelpTooltipText,
2122
HelpTooltipTitle,
2223
} from "components/HelpTooltip/HelpTooltip";
@@ -31,29 +32,28 @@ import Select from "@mui/material/Select";
3132
import MenuItem from "@mui/material/MenuItem";
3233
import FormControl from "@mui/material/FormControl";
3334
import TextField from "@mui/material/TextField";
34-
import SensorsIcon from '@mui/icons-material/Sensors';
35-
import Add from '@mui/icons-material/Add';
36-
import IconButton from "@mui/material/IconButton";
37-
import LockIcon from '@mui/icons-material/Lock';
38-
import LockOpenIcon from '@mui/icons-material/LockOpen';
39-
import DeleteIcon from '@mui/icons-material/Delete';
35+
import SensorsIcon from "@mui/icons-material/Sensors";
36+
import LockIcon from "@mui/icons-material/Lock";
37+
import LockOpenIcon from "@mui/icons-material/LockOpen";
4038

4139
export interface PortForwardButtonProps {
4240
host: string;
4341
username: string;
4442
workspaceName: string;
43+
workspaceID: string;
4544
agent: WorkspaceAgent;
4645

4746
/**
4847
* Only for use in Storybook
4948
*/
5049
storybook?: {
51-
portsQueryData?: WorkspaceAgentListeningPortsResponse;
50+
listeningPortsQueryData?: WorkspaceAgentListeningPortsResponse;
51+
sharedPortsQueryData?: WorkspaceAgentPortShares;
5252
};
5353
}
5454

5555
export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
56-
const { agent, storybook } = props;
56+
const { agent, workspaceID, storybook } = props;
5757

5858
const paper = useClassName(classNames.paper, []);
5959

@@ -64,21 +64,34 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
6464
refetchInterval: 5_000,
6565
});
6666

67-
const data = storybook ? storybook.portsQueryData : portsQuery.data;
67+
const sharedPortsQuery = useQuery({
68+
queryKey: ["sharedPorts", agent.id],
69+
queryFn: () => getWorkspaceAgentSharedPorts(workspaceID),
70+
enabled: !storybook && agent.status === "connected",
71+
});
72+
73+
const listeningPorts = storybook
74+
? storybook.listeningPortsQueryData
75+
: portsQuery.data;
76+
const sharedPorts = storybook
77+
? storybook.sharedPortsQueryData
78+
: sharedPortsQuery.data;
6879

6980
return (
7081
<Popover>
7182
<PopoverTrigger>
7283
<Button
73-
disabled={!data}
84+
disabled={!listeningPorts}
7485
size="small"
7586
variant="text"
7687
endIcon={<KeyboardArrowDown />}
7788
css={{ fontSize: 13, padding: "8px 12px" }}
7889
startIcon={
79-
data ? (
90+
listeningPorts ? (
8091
<div>
81-
<span css={styles.portCount}>{data.ports.length}</span>
92+
<span css={styles.portCount}>
93+
{listeningPorts.ports.length}
94+
</span>
8295
</div>
8396
) : (
8497
<CircularProgress size={10} />
@@ -89,34 +102,30 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
89102
</Button>
90103
</PopoverTrigger>
91104
<PopoverContent horizontal="right" classes={{ paper }}>
92-
<PortForwardPopoverView {...props} ports={data?.ports} />
105+
<PortForwardPopoverView
106+
{...props}
107+
listeningPorts={listeningPorts?.ports}
108+
sharedPorts={sharedPorts?.shares}
109+
/>
93110
</PopoverContent>
94111
</Popover>
95112
);
96113
};
97114

98115
interface PortForwardPopoverViewProps extends PortForwardButtonProps {
99-
ports?: WorkspaceAgentListeningPort[];
116+
listeningPorts?: WorkspaceAgentListeningPort[];
117+
sharedPorts?: WorkspaceAgentPortShare[];
100118
}
101119

102120
export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
103121
host,
104122
workspaceName,
105123
agent,
106124
username,
107-
ports,
125+
listeningPorts,
126+
sharedPorts,
108127
}) => {
109128
const theme = useTheme();
110-
const sharedPorts = [
111-
{
112-
port: 8090,
113-
share_level: "Authenticated",
114-
},
115-
{
116-
port: 8091,
117-
share_level: "Public",
118-
}
119-
];
120129

121130
return (
122131
<>
@@ -126,18 +135,20 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
126135
borderBottom: `1px solid ${theme.palette.divider}`,
127136
}}
128137
>
129-
<Stack direction="row" justifyContent="space-between" alignItems="start">
130-
<HelpTooltipTitle>Listening ports</HelpTooltipTitle>
138+
<Stack
139+
direction="row"
140+
justifyContent="space-between"
141+
alignItems="start"
142+
>
143+
<HelpTooltipTitle>Listening ports</HelpTooltipTitle>
131144
<HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
132145
Learn more
133146
</HelpTooltipLink>
134147
</Stack>
135148
<HelpTooltipText css={{ color: theme.palette.text.secondary }}>
136-
{ports?.length === 0
149+
{listeningPorts?.length === 0
137150
? "No open ports were detected."
138-
: "The listening ports are exclusively accessible to you."
139-
}
140-
151+
: "The listening ports are exclusively accessible to you."}
141152
</HelpTooltipText>
142153
<form
143154
css={styles.newPortForm}
@@ -186,10 +197,11 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
186197
</Button>
187198
</form>
188199
<div
189-
css={{
190-
paddingTop: 10,
191-
}}>
192-
{ports?.map((port) => {
200+
css={{
201+
paddingTop: 10,
202+
}}
203+
>
204+
{listeningPorts?.map((port) => {
193205
const url = portForwardURL(
194206
host,
195207
port.port,
@@ -200,7 +212,12 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
200212
const label =
201213
port.process_name !== "" ? port.process_name : port.port;
202214
return (
203-
<Stack key={port.port} direction="row" justifyContent="space-between" alignItems="center">
215+
<Stack
216+
key={port.port}
217+
direction="row"
218+
justifyContent="space-between"
219+
alignItems="center"
220+
>
204221
<Link
205222
underline="none"
206223
css={styles.portLink}
@@ -227,95 +244,94 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
227244
);
228245
})}
229246
</div>
230-
</div>
231-
<div css={{
247+
</div>
248+
<div
249+
css={{
232250
padding: 20,
233-
}}>
251+
}}
252+
>
234253
<HelpTooltipTitle>Shared Ports</HelpTooltipTitle>
235254
<HelpTooltipText css={{ color: theme.palette.text.secondary }}>
236-
{ports?.length === 0
255+
{listeningPorts?.length === 0
237256
? "No ports are shared."
238257
: "Ports can be shared with other Coder users or with the public."}
239258
</HelpTooltipText>
240259
<div>
241-
{sharedPorts?.map((port) => {
260+
{sharedPorts?.map((share) => {
242261
const url = portForwardURL(
243262
host,
244-
port.port,
263+
share.port,
245264
agent.name,
246265
workspaceName,
247266
username,
248267
);
249-
const label = port.port;
268+
const label = share.port;
250269
return (
251-
<Stack key={port.port} direction="row" justifyContent="space-between" alignItems="center">
270+
<Stack
271+
key={share.port}
272+
direction="row"
273+
justifyContent="space-between"
274+
alignItems="center"
275+
>
252276
<Link
253277
underline="none"
254278
css={styles.portLink}
255279
href={url}
256280
target="_blank"
257281
rel="noreferrer"
258282
>
259-
{port.share_level === "Public" ?
260-
(
283+
{share.share_level === "public" ? (
261284
<LockOpenIcon css={{ width: 14, height: 14 }} />
262-
)
263-
: (
285+
) : (
264286
<LockIcon css={{ width: 14, height: 14 }} />
265287
)}
266288
{label}
267289
</Link>
268290
<Stack direction="row" gap={1}>
269-
<FormControl size="small">
270-
<Select
271-
sx={{
272-
boxShadow: "none",
273-
".MuiOutlinedInput-notchedOutline": { border: 0 },
274-
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
275-
{
276-
border: 0,
277-
},
278-
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
279-
{
280-
border: 0,
281-
},
282-
}}
283-
value={port.share_level}
284-
>
285-
<MenuItem value="Owner">Owner</MenuItem>
286-
<MenuItem value="Authenticated">Authenticated</MenuItem>
287-
<MenuItem value="Public">Public</MenuItem>
288-
</Select>
289-
</FormControl>
291+
<FormControl size="small">
292+
<Select
293+
sx={{
294+
boxShadow: "none",
295+
".MuiOutlinedInput-notchedOutline": { border: 0 },
296+
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
297+
{
298+
border: 0,
299+
},
300+
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
301+
{
302+
border: 0,
303+
},
304+
}}
305+
value={share.share_level}
306+
>
307+
<MenuItem value="Authenticated">Authenticated</MenuItem>
308+
<MenuItem value="Public">Public</MenuItem>
309+
</Select>
310+
</FormControl>
290311
</Stack>
291-
292312
</Stack>
293313
);
294314
})}
295-
</div>
296-
<Stack direction="column" gap={1} justifyContent="flex-end" sx={{
297-
marginTop: 2,
298-
}}>
299-
<TextField
300-
label="Port"
301-
variant="outlined"
302-
size="small"
303-
/>
315+
</div>
316+
<Stack
317+
direction="column"
318+
gap={1}
319+
justifyContent="flex-end"
320+
sx={{
321+
marginTop: 2,
322+
}}
323+
>
324+
<TextField label="Port" variant="outlined" size="small" />
304325
<FormControl size="small">
305-
<Select
306-
value="Authenticated"
307-
>
308-
<MenuItem value="Authenticated">Authenticated</MenuItem>
309-
<MenuItem value="Public">Public</MenuItem>
310-
</Select>
326+
<Select value="Authenticated">
327+
<MenuItem value="Authenticated">Authenticated</MenuItem>
328+
<MenuItem value="Public">Public</MenuItem>
329+
</Select>
311330
</FormControl>
312-
<Button variant="contained">
313-
Add Shared Port
314-
</Button>
331+
<Button variant="contained">Add Shared Port</Button>
315332
</Stack>
316333
</div>
317334

318-
319335
{/* <div css={{ padding: 20 }}>
320336
<HelpTooltipTitle>Forward port</HelpTooltipTitle>
321337
<HelpTooltipText css={{ color: theme.palette.text.secondary }}>

0 commit comments

Comments
 (0)