Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3ab5a51

Browse files
authored
feat: add listening ports protocol selector (#12915)
1 parent4968916 commit3ab5a51

File tree

3 files changed

+168
-100
lines changed

3 files changed

+168
-100
lines changed

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

Lines changed: 144 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Stack from "@mui/material/Stack";
1616
importTextFieldfrom"@mui/material/TextField";
1717
importTooltipfrom"@mui/material/Tooltip";
1818
import{typeFormikContextType,useFormik}from"formik";
19-
importtype{FC}from"react";
19+
import{useState,typeFC}from"react";
2020
import{useQuery,useMutation}from"react-query";
2121
import*asYupfrom"yup";
2222
import{getAgentListeningPorts}from"api/api";
@@ -48,7 +48,11 @@ import { type ClassName, useClassName } from "hooks/useClassName";
4848
import{useDashboard}from"modules/dashboard/useDashboard";
4949
import{docs}from"utils/docs";
5050
import{getFormHelpers}from"utils/formUtils";
51-
import{portForwardURL}from"utils/portForward";
51+
import{
52+
getWorkspaceListeningPortsProtocol,
53+
portForwardURL,
54+
saveWorkspaceListeningPortsProtocol,
55+
}from"utils/portForward";
5256

5357
exportinterfacePortForwardButtonProps{
5458
host:string;
@@ -135,6 +139,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
135139
portSharingControlsEnabled,
136140
})=>{
137141
consttheme=useTheme();
142+
const[listeningPortProtocol,setListeningPortProtocol]=useState(
143+
getWorkspaceListeningPortsProtocol(workspaceID),
144+
);
138145

139146
constsharedPortsQuery=useQuery({
140147
...workspacePortShares(workspaceID),
@@ -189,15 +196,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
189196
(port)=>port.agent_name===agent.name,
190197
);
191198
// we don't want to show listening ports if it's a shared port
192-
constfilteredListeningPorts=listeningPorts?.filter((port)=>{
193-
for(leti=0;i<filteredSharedPorts.length;i++){
194-
if(filteredSharedPorts[i].port===port.port){
195-
returnfalse;
196-
}
197-
}
198-
199-
returntrue;
200-
});
199+
constfilteredListeningPorts=(listeningPorts??[]).filter((port)=>
200+
filteredSharedPorts.every((sharedPort)=>sharedPort.port!==port.port),
201+
);
201202
// only disable the form if shared port controls are entitled and the template doesn't allow sharing ports
202203
constcanSharePorts=
203204
portSharingExperimentEnabled&&
@@ -224,95 +225,117 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
224225
overflowY:"auto",
225226
}}
226227
>
227-
<header
228-
css={(theme)=>({
228+
<Stack
229+
direction="column"
230+
css={{
229231
padding:20,
230-
paddingBottom:10,
231-
position:"sticky",
232-
top:0,
233-
background:theme.palette.background.paper,
234-
// For some reason the Share button label has a higher z-index than
235-
// the header. Probably some tricky stuff from MUI.
236-
zIndex:1,
237-
})}
232+
}}
238233
>
239234
<Stack
240235
direction="row"
241236
justifyContent="space-between"
242237
alignItems="start"
243238
>
244-
<HelpTooltipTitle>Listeningports</HelpTooltipTitle>
239+
<HelpTooltipTitle>ListeningPorts</HelpTooltipTitle>
245240
<HelpTooltipLink
246241
href={docs("/networking/port-forwarding#dashboard")}
247242
>
248243
Learn more
249244
</HelpTooltipLink>
250245
</Stack>
251-
<HelpTooltipTextcss={{color:theme.palette.text.secondary}}>
252-
{filteredListeningPorts?.length===0
253-
?"No open ports were detected."
254-
:"The listening ports are exclusively accessible to you."}
255-
</HelpTooltipText>
256-
<form
257-
css={styles.newPortForm}
258-
onSubmit={(e)=>{
259-
e.preventDefault();
260-
constformData=newFormData(e.currentTarget);
261-
constport=Number(formData.get("portNumber"));
262-
consturl=portForwardURL(
263-
host,
264-
port,
265-
agent.name,
266-
workspaceName,
267-
username,
268-
);
269-
window.open(url,"_blank");
270-
}}
271-
>
272-
<input
273-
aria-label="Port number"
274-
name="portNumber"
275-
type="number"
276-
placeholder="Connect to port..."
277-
min={9}
278-
max={65535}
279-
required
280-
css={styles.newPortInput}
281-
/>
282-
<Button
283-
type="submit"
284-
size="small"
285-
variant="text"
246+
<Stackdirection="column"gap={1}>
247+
<HelpTooltipTextcss={{color:theme.palette.text.secondary}}>
248+
The listening ports are exclusively accessible to you. Selecting
249+
HTTP/S will change the protocol for all listening ports.
250+
</HelpTooltipText>
251+
<Stack
252+
direction="row"
253+
gap={2}
286254
css={{
287-
paddingLeft:12,
288-
paddingRight:12,
289-
minWidth:0,
255+
paddingBottom:8,
290256
}}
291257
>
292-
<OpenInNewOutlined
293-
css={{
294-
flexShrink:0,
295-
width:14,
296-
height:14,
297-
color:theme.palette.text.primary,
258+
<FormControlsize="small"css={styles.protocolFormControl}>
259+
<Select
260+
css={styles.listeningPortProtocol}
261+
value={listeningPortProtocol}
262+
onChange={async(event)=>{
263+
constselectedProtocol=event.target.valueas
264+
|"http"
265+
|"https";
266+
setListeningPortProtocol(selectedProtocol);
267+
saveWorkspaceListeningPortsProtocol(
268+
workspaceID,
269+
selectedProtocol,
270+
);
271+
}}
272+
>
273+
<MenuItemvalue="http">HTTP</MenuItem>
274+
<MenuItemvalue="https">HTTPS</MenuItem>
275+
</Select>
276+
</FormControl>
277+
<form
278+
css={styles.newPortForm}
279+
onSubmit={(e)=>{
280+
e.preventDefault();
281+
constformData=newFormData(e.currentTarget);
282+
constport=Number(formData.get("portNumber"));
283+
consturl=portForwardURL(
284+
host,
285+
port,
286+
agent.name,
287+
workspaceName,
288+
username,
289+
listeningPortProtocol,
290+
);
291+
window.open(url,"_blank");
298292
}}
299-
/>
300-
</Button>
301-
</form>
302-
</header>
303-
<div
304-
css={{
305-
padding:20,
306-
paddingTop:0,
307-
}}
308-
>
309-
{filteredListeningPorts?.map((port)=>{
293+
>
294+
<input
295+
aria-label="Port number"
296+
name="portNumber"
297+
type="number"
298+
placeholder="Connect to port..."
299+
min={9}
300+
max={65535}
301+
required
302+
css={styles.newPortInput}
303+
/>
304+
<Button
305+
type="submit"
306+
size="small"
307+
variant="text"
308+
css={{
309+
paddingLeft:12,
310+
paddingRight:12,
311+
minWidth:0,
312+
}}
313+
>
314+
<OpenInNewOutlined
315+
css={{
316+
flexShrink:0,
317+
width:14,
318+
height:14,
319+
color:theme.palette.text.primary,
320+
}}
321+
/>
322+
</Button>
323+
</form>
324+
</Stack>
325+
</Stack>
326+
{filteredListeningPorts.length===0&&(
327+
<HelpTooltipTextcss={styles.noPortText}>
328+
No open ports were detected.
329+
</HelpTooltipText>
330+
)}
331+
{filteredListeningPorts.map((port)=>{
310332
consturl=portForwardURL(
311333
host,
312334
port.port,
313335
agent.name,
314336
workspaceName,
315337
username,
338+
listeningPortProtocol,
316339
);
317340
constlabel=
318341
port.process_name!=="" ?port.process_name :port.port;
@@ -323,31 +346,33 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
323346
alignItems="center"
324347
justifyContent="space-between"
325348
>
326-
<Link
327-
underline="none"
328-
css={styles.portLink}
329-
href={url}
330-
target="_blank"
331-
rel="noreferrer"
332-
>
333-
<SensorsIconcss={{width:14,height:14}}/>
334-
{label}
335-
</Link>
336-
<Stack
337-
direction="row"
338-
gap={2}
339-
justifyContent="flex-end"
340-
alignItems="center"
341-
>
349+
<Stackdirection="row"gap={3}>
342350
<Link
343351
underline="none"
344352
css={styles.portLink}
345353
href={url}
346354
target="_blank"
347355
rel="noreferrer"
348356
>
349-
<spancss={styles.portNumber}>{port.port}</span>
357+
<SensorsIconcss={{width:14,height:14}}/>
358+
{port.port}
350359
</Link>
360+
<Link
361+
underline="none"
362+
css={styles.portLink}
363+
href={url}
364+
target="_blank"
365+
rel="noreferrer"
366+
>
367+
{label}
368+
</Link>
369+
</Stack>
370+
<Stack
371+
direction="row"
372+
gap={2}
373+
justifyContent="flex-end"
374+
alignItems="center"
375+
>
351376
{canSharePorts&&(
352377
<Button
353378
size="small"
@@ -356,7 +381,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
356381
awaitupsertSharedPortMutation.mutateAsync({
357382
agent_name:agent.name,
358383
port:port.port,
359-
protocol:"http",
384+
protocol:listeningPortProtocol,
360385
share_level:"authenticated",
361386
});
362387
awaitsharedPortsQuery.refetch();
@@ -369,7 +394,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
369394
</Stack>
370395
);
371396
})}
372-
</div>
397+
</Stack>
373398
</div>
374399
{portSharingExperimentEnabled&&(
375400
<div
@@ -393,7 +418,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
393418
agent.name,
394419
workspaceName,
395420
username,
396-
share.protocol==="https",
421+
share.protocol,
397422
);
398423
constlabel=share.port;
399424
return(
@@ -619,6 +644,22 @@ const styles = {
619644
"&:focus-within":{
620645
borderColor:theme.palette.primary.main,
621646
},
647+
width:"100%",
648+
}),
649+
650+
listeningPortProtocol:(theme)=>({
651+
boxShadow:"none",
652+
".MuiOutlinedInput-notchedOutline":{border:0},
653+
"&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":{
654+
border:0,
655+
},
656+
"&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":{
657+
border:0,
658+
},
659+
border:`1px solid${theme.palette.divider}`,
660+
borderRadius:"4px",
661+
marginTop:8,
662+
minWidth:"100px",
622663
}),
623664

624665
newPortInput:(theme)=>({
@@ -633,6 +674,12 @@ const styles = {
633674
display:"block",
634675
width:"100%",
635676
}),
677+
noPortText:(theme)=>({
678+
color:theme.palette.text.secondary,
679+
paddingTop:20,
680+
paddingBottom:10,
681+
textAlign:"center",
682+
}),
636683
sharedPortLink:()=>({
637684
minWidth:80,
638685
}),

‎site/src/testHelpers/entities.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3261,7 +3261,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
32613261
exportconstMockListeningPortsResponse:TypesGen.WorkspaceAgentListeningPortsResponse=
32623262
{
32633263
ports:[
3264-
{process_name:"webb",network:"",port:3000},
3264+
{process_name:"webb",network:"",port:30000},
32653265
{process_name:"gogo",network:"",port:8080},
32663266
{process_name:"",network:"",port:8081},
32673267
],

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp