Epic: Improve experience using ports with Gitpod

[loujaybee]

We will have almost parity of ports features between JetBrains, VS Code and CLI.

Following the introduction of:

1. Epic: JetBrains dedicated ports window #9700
2. Epic: JetBrains Ports information shown on terminals #10581
3. GP CLI command to control port visibility #10835
4. Gitpod port control via gp-cli #9286
5. Add making port public into VS Code Desktop #11616
6. Epic: unify ports view between web and desktop #7408

Beyond those issues, we can look at introducing some "value add" features across all three main clients (JetBrains, VS Code and CLI) for things like grouping, hiding/showing ports) etc. For example:

1. Forwarded / exposed ports experience
2. Bi-directional port management (configuration drift)
3. Sort Ports view #13777
4. Remote Explorer should list ports in numerical order #7764
5. tree / groups for port list #10294
6. "Ignore" option for port on notification and in port management views #10275
7. Hide unused ports from ports view(s) #10408
8. Auto-Inject "Access-Control-Allow-Credentials" for Private Port Responses #6687
9. Add a button to VS Code Ports View that adds the port to .gitpod.yml in case it's missing there #13069
10. Add machine readable formats to gp CLI output #10448
11. https://github.com/gitpod-io/website/issues/2958

Completed

1. Handle port notifications in JetBrains #9908
2. Local companion expose port of local machine to remote machine #6240
3. SSH Gateway doesn't support remote port-forward #10248
4. gp ports command #9930
5. Allow forwarding of SSH & GPG agents in VSCode extension. #6993
6. Move all ports commands under the gp CLI namespace #10449
7. Improve new Ports view #11154
8. Interchage private and public port visibility icon on the editor #7662

Related internal conversation(s) [1][2] and feedback on Twitter [1]

[konne]

@loujaybee please add these issues to the epic
#9285
#9286
#9287
#9289

[shaal]

Can #7012 be part of this improvement?
I tried using names and descriptions for ports but couldn't see it in the VSCode interface in the browser
https://github.com/shaal/DrupalPod/blob/port-descriptions/.gitpod.yml#L38

[akosyakov]

I tried using names and descriptions for ports but couldn't see it in the VSCode interface in the browser
https://github.com/shaal/DrupalPod/blob/port-descriptions/.gitpod.yml#L38

@jeanp413 @felladrin a regression?

[felladrin]

a regression?

🤔 The code I added on openvscode-server is still on gp-code/main.

EDIT: I've just hardcoded some values there and I confirm it was displayed on VS Code.

So it seems it's Supervisor who is always sending "name" and "descrption" as empty strings, not respecting what's in .gitpod.yml. (All lines added to Supervisor on #7012 are still in place, though.)

[sgarner]

If I can make a suggestion/feature request here... Would it be feasible to show open ports on the Gitpod "Running Workspace" page? i.e. the ports could be listed here:

I imagine it's a common use case that people run a web server in Gitpod when developing web projects, and want to open up their development site in a browser when opening a workspace.

When using Gitpod with a desktop IDE, whether VS Code or JetBrains, you currently lose the UI for "Ports" which only exists in the web version of VS Code. So I find I have to open the workspace in the desktop IDE and also select "Open in Browser" (to open the workspace in the web version of VS Code) just to access the port URL. This feels unnecessarily tedious - if the ports could be shown on the workspace page it would streamline things.

[loujaybee]

@sgarner, thanks for the feedback! I doubt we'll integrate ports into that view. I think having a dedicated preview feature is more likely #9017 to resolve this use case. That said, I think you have a few other options available to you, maybe you could check these out and let me know if they help fix your use case? 👇

When using Gitpod with a desktop IDE, whether VS Code or JetBrains, you currently lose the UI for "Ports" which only exists in the web version of VS Code.

JetBrains - Can show ports, but only when you use a run configuration (currently), they are working on a more generic ports view. There is a port forwarding view, but it doesn't auto-detect ports like VS Code on browser/desktop (yet).

VS Code Desktop - There is a ports view in VS Code Desktop, but it's at the bottom of the screen, next to terminal. We are looking to update this view so it's the same in both desktop and browser, soon, please see: #7408

CLI - For the CLI (as a workaround in any IDE or editor, or for Vim / CLI users, you can now see ports using gp ports list => #10388 (docs update coming soon, and additions such as toggling visibility via CLI coming soon, also).

For all of the above there are some improvements to the docs coming: https://github.com/gitpod-io/website/pull/2126, not released yet, but you can view the markdown and it should explain the above a bit more 🙏

I imagine it's a common use case that people run a web server in Gitpod when developing web projects, and want to open up their development site in a browser when opening a workspace.

Have you seen the onOpen flag in gitpod.yml, this should take effect in all IDE's, desktop and browser, however in JetBrains there is no preview option. Please see: https://www.gitpod.io/docs/references/gitpod-yml#portsnonopen

Let me know if you have questions on the above! Lots more improvements coming for ports in the coming weeks 🙏

[sgarner]

@loujaybee thanks so much for the detailed response! 👋

I doubt we'll integrate ports into that view. I think having a dedicated preview feature is more likely #9017 to resolve this use case.

Preview workspaces will be a nice feature for reviews but I don't think they relate to this use case at all. I need to open my site in the browser while I'm working on it in my development workspace.

JetBrains - Can show ports, but only when you use a run configuration (currently), they are working on a more generic ports view. There is a port forwarding view, but it doesn't auto-detect ports like VS Code on browser/desktop (yet).

This seems to be a different thing as well. I just want to list the ports that are exposed on the Gitpod instance and get the preview link, not configure port forwarding.

VS Code Desktop - There is a ports view in VS Code Desktop, but it's at the bottom of the screen, next to terminal. We are looking to update this view so it's the same in both desktop and browser, soon, please see: #7408

In VS Code Web, I see:

Whereas when I look at the Ports view in VS Code Desktop, it's always empty:

I can manually add a port here to forward it to localhost and then open http://localhost:8002, and this works, but it's different from the desired UX from Web where I can simply open the https://8002-org-project-xxxxxxxxxx.ws-us00.gitpod.io/ URL directly.

If you can match the functionality of the Ports view from VS Code Web on Desktop, which seems to be the plan in #7408 , that would be a good solution.

CLI - For the CLI (as a workaround in any IDE or editor, or for Vim / CLI users, you can now see ports using gp ports list => #10388 (docs update coming soon, and additions such as toggling visibility via CLI coming soon, also).

This is great news! I see that gp preview $(gp url 8002) --external would also be a useful command for me, which I didn't know before.

Have you seen the onOpen flag in gitpod.yml, this should take effect in all IDE's, desktop and browser, however in JetBrains there is no preview option. Please see: https://www.gitpod.io/docs/references/gitpod-yml#portsnonopen

Yes, I've been using that for a while with open-preview and it works well in VS Code Web. But nothing happens when I launch my workspace in VS Code Desktop. Is support for onOpen on desktop a new feature or does it depend on something I'm missing?

I was going to say it doesn't work in JetBrains IDEs either - but while writing this I found there's an update to the JetBrains Gateway application (2022.2 EAP) and the Gitpod Gateway plugin, after installing those updates then launching my workspace again it offered to open the port marked with open-preview in a browser exactly as I was hoping for. 🚀

[loujaybee]

Adding some feedback from a user in the community, similar to mentioned by @sgarner above.

VS Code Desktop ports view doesn't have a Make public option or a correct link to preview my website in the browser. 2. gp ports doesn't have a way to make a port public instead of private from what i can tell. 3. Myself. When logging into my web app while i'm developing, I need to change its port to public for next-auth to be able to login properly, and then I change it back to private. This is because, for some bizarre reason, the method to get the csrf token that you use on the server side is the same as the one you use on the client side and makes a fetch request using the nextauth_url, which IMO is rather idiotic, but then again, I think that about a few of their design decisions, but I need to use this method in my custom credentials provider. As I write this, it occurred to me that I could just get the token from the cookie in the request object and verify it's legitimacy, instead of using their dumb method that depends on a fetch request, so I have gone ahead and changed that. So this isn't necessarily an issue for me now that I just changed that, but this is an example of an edge case where the ability to toggle between public and private ports without opening up the browser IDE is beneficial.

Relates to:

• Add making port public into VS Code Desktop #11616
• GP CLI command to control port visibility #10835

[davemecha]

I'm really not happy with the new ports view but I'm not sure if I should open new tasks for them. I've got the following issues.

• The new ports view is sooo slow. When opened, I have to wait too long till I can use it. (I assume this is already reported in Ports view first opening is very slow than previous Remote Explorer #11426)
• I don't like the location of the new ports view. I often need to always see my terminal, but I also want to access the ports view. I tried various solutions, but none were helpful:
• The view is too wide to be displayed on more narrow parts of the UI and actions are not accessible.

.......

• Please place address & actions in separate columns
• It would be helpful to be able to at least customize the view with options to:
  • remove the address
  • remove description column
  • remove state column (it's redundant info displayed in status & action icons)
  • adjust column widths
  • change column order

As an alternative, you could provide the option to activate the old ports view again (ports legacy). With this you could test how users are satisfied with the new experience or if users tend to switch back to the old view.

[akosyakov]

As an alternative, you could provide the option to activate the old ports view again (ports legacy). With this you could test how users are satisfied with the new experience or if users tend to switch back to the old view.

Yeah, we had it like that for 2 months and hoped that all users provided feedback [1]. A bit sad that feedback come so late. Right now we should discuss whether reintroduce the setting or address issues for new view.

[davemecha]

Yeah, we had it like that for 2 months and hoped that all users provided feedback [1]. A bit sad that feedback come so late. Right now we should discuss whether reintroduce the setting or address issues for new view.

Sorry I missed that. Unfortunately sometimes I don't check the changelog. Maybe you could add a feature to suggest new experimental features to users in the UI (with an option to easily toggle the features, like e.g. Google does this sometimes). With this users would get easier aware of changes, possibly trying stuff more often so you might get more feedback.

[akosyakov]

@davemecha Could you try again? Many improvements were done last week. Now ports UI should be responsive to width and location. Location also should be preserved between your workspaces, i.e. if you move it to left or right it will stay there.

@mustard-mh @jeanp413 all improvements have been deployed for VS Code Browser and Desktop correct?

[davemecha]

@akosyakov Thanks for this great visual improvement. :) - The responsiveness works great!

Unfortunately the performance dropped extremely. If I move the view or open it the first time after the workspace launch, It needs more than 20 seconds to be populated (at least on my chromebook).

Check the screen recording...

Screen.recording.2022-10-17.22.03.11.webm

[akosyakov]

@davemecha could you share console and network logs when it happens from your browser? We are not able to reproduce it on our machines unfortunately.

[davemecha]

@akosyakov I checked again and there is just a warning in the console.

This was my testing repo: https://github.com/davemecha/nuxt-gitpod-test

I tried to reproduce the problem on a fast windows PC of a friend with a Core i7 4th gen (Haswell) and the delay was just about a second. My computer is a Chromebook with an 8th gen (Coffee Lake) m3. So my computer might be pretty slow and maybe low of ram too (due to a running linux VM, several tabs open, ...).

So to reproduce this, you could try a mid range chromebook. - I can't remember having such performance issues with Gitpod and I assume this has something to do with the new view implementation. The old ports view was always fast.

Should I create a separate bug for this? - Maybe this is not the right place for this issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.