Improve ports

Author: jeanp413

.vscode/launch.json

@@ -2,7 +2,7 @@
 	"version": "0.1.0",
 	"configurations": [
 		{
-			"name": "Launch Built-in Extension",
+			"name": "Launch gitpod-web",
 			"type": "extensionHost",
 			"request": "launch",
 			"runtimeExecutable": "${execPath}",
@@ -16,6 +16,21 @@
 				"${workspaceRoot}/extensions/gitpod-web/out/**/*.js",
 			]
 		},
+		{
+			"name": "Launch gitpod-remote",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": [
+				"${workspaceFolder}",
+				"--extensionDevelopmentPath=${workspaceRoot}/extensions/gitpod-remote",
+				"--log=debug"
+			],
+			"outFiles": [
+				"${workspaceRoot}/extensions/gitpod-shared/out/**/*.js",
+				"${workspaceRoot}/extensions/gitpod-remote/out/**/*.js",
+			]
+		},
 		{
 			"type": "node",
 			"request": "launch",

build/gulpfile.gitpod.js

@@ -66,6 +66,11 @@ const packageMarketplaceExtensions = task.define('package-gitpod-marketplace-ext
 	}))
 ));
 gulp.task(packageMarketplaceExtensions);
+const bundlePortsWebview = task.define('bundle-remote-ports-webview', async () => {
+	await promisify(cp.exec)(`yarn --cwd ${path.join(extensionsPath, 'gitpod-remote')} run build:webview`, { encoding: 'utf8' });
+	gulp.src([`${path.join(extensionsPath, 'gitpod-remote')}/public/**/*`]).pipe(gulp.dest(path.join(outMarketplaceExtensions, 'gitpod-remote/public/')));
+});
+gulp.task(bundlePortsWebview);
 for (const extensionName of marketplaceExtensions) {
 	const cleanExtension = task.define('gitpod:clean-extension:' + extensionName, util.rimraf(path.join(outMarketplaceExtensions, extensionName)));
 	const bumpExtension = task.define('gitpod:bump-extension:' + extensionName, async () => {
@@ -96,6 +101,7 @@ for (const extensionName of marketplaceExtensions) {
 	gulp.task(publishExtension);
 	const packageExtension = task.define('gitpod:package-extension:' + extensionName, task.series(
 		bundleExtension,
+		bundlePortsWebview,
 		() => vsce.createVSIX({
 			cwd: path.join(outMarketplaceExtensions, extensionName)
 		})

extensions/gitpod-remote/.gitignore

@@ -0,0 +1 @@
+public/

extensions/gitpod-remote/package.json

@@ -3,7 +3,7 @@
   "displayName": "%displayName%",
   "description": "%description%",
   "publisher": "gitpod",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "license": "MIT",
   "preview": true,
   "icon": "resources/gitpod.png",
@@ -28,10 +28,10 @@
     "workspace"
   ],
   "capabilities": {
-		"untrustedWorkspaces": {
-			"supported": true
-		}
-	},
+    "untrustedWorkspaces": {
+      "supported": true
+    }
+  },
   "activationEvents": [
     "*"
   ],
@@ -109,19 +109,74 @@
         "enablement": "gitpod.inWorkspace == true && gitpod.workspaceOwned == true && gitpod.workspaceShared == true"
       },
       {
-        "command": "gitpod.openInStable",
-        "title": "%openInStable%",
-        "enablement": "gitpod.inWorkspace == true && gitpod.UIKind == 'web'"
+        "command": "gitpod.openInBrowser",
+        "title": "%openInBrowser%",
+        "enablement": "gitpod.inWorkspace == true && gitpod.UIKind == 'desktop'"
       },
       {
-        "command": "gitpod.openInInsiders",
-        "title": "%openInInsiders%",
-        "enablement": "gitpod.inWorkspace == true && gitpod.UIKind == 'web'"
+        "command": "gitpod.ports.openBrowser",
+        "title": "%openBrowser%",
+        "icon": "$(globe)"
       },
       {
-        "command": "gitpod.openInBrowser",
-        "title": "%openInBrowser%",
-        "enablement": "gitpod.inWorkspace == true && gitpod.UIKind == 'desktop'"
+        "command": "gitpod.ports.retryAutoExpose",
+        "title": "%retryAutoExpose%",
+        "icon": "$(refresh)"
+      },
+      {
+        "command": "gitpod.ports.preview",
+        "title": "%openPreview%",
+        "icon": "$(open-preview)"
+      },
+      {
+        "command": "gitpod.ports.makePrivate",
+        "title": "%makePrivate%",
+        "icon": "$(unlock)"
+      },
+      {
+        "command": "gitpod.ports.makePublic",
+        "title": "%makePublic%",
+        "icon": "$(lock)"
+      },
+      {
+        "command": "gitpod.ports.tunnelNetwork",
+        "title": "%tunnelNetwork%",
+        "icon": "$(eye)"
+      },
+      {
+        "command": "gitpod.ports.tunnelHost",
+        "title": "%tunnelHost%",
+        "icon": "$(eye-closed)"
+      }
+    ],
+    "commandPalette": [
+      {
+        "command": "gitpod.ports.preview",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.openBrowser",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.retryAutoExpose",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.makePublic",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.makePrivate",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.tunnelNetwork",
+        "when": "false"
+      },
+      {
+        "command": "gitpod.ports.tunnelHost",
+        "when": "false"
       }
     ],
     "menus": {
@@ -196,32 +251,65 @@
           "group": "remote_00_gitpod_navigation@130",
           "when": "gitpod.inWorkspace == true && gitpod.workspaceOwned == true && gitpod.workspaceShared == true"
         },
-        {
-          "command": "gitpod.openInStable",
-          "group": "remote_00_gitpod_navigation@900",
-          "when": "gitpod.inWorkspace == true && gitpod.UIKind == 'web'"
-        },
-        {
-          "command": "gitpod.openInInsiders",
-          "group": "remote_00_gitpod_navigation@1000",
-          "when": "gitpod.inWorkspace == true && gitpod.UIKind == 'web'"
-        },
         {
           "command": "gitpod.openInBrowser",
           "group": "remote_00_gitpod_navigation@1000",
           "when": "gitpod.inWorkspace == true && gitpod.UIKind == 'desktop'"
         }
       ]
+    },
+    "views": {
+      "portsView": [
+        {
+          "id": "gitpod.portsView",
+          "name": "",
+          "type": "webview",
+          "contextualTitle": "",
+          "icon": "$(plug)"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "panel": [
+        {
+          "id": "portsView",
+          "title": "Exposed Ports",
+          "icon": "$(plug)"
+        }
+      ]
     }
   },
   "scripts": {
-    "vscode:prepublish": "yarn run compile --cwd .."
+    "vscode:prepublish": "yarn build:webview; yarn compile",
+    "compile": "tsc -b",
+    "watch": "tsc -b -w",
+    "build:webview": "rollup -c",
+    "watch:webview": "rollup -c -w",
+    "start:webview": "sirv public --no-clear"
   },
   "devDependencies": {
-    "@types/node": "16.x"
+    "@types/node": "16.x",
+    "@tsconfig/svelte": "^2.0.0",
+    "@types/vscode-webview": "^1.57.0",
+    "svelte": "^3.0.0",
+    "svelte-check": "^2.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@rollup/plugin-alias": "^3.1.9",
+    "svelte-preprocess": "^4.0.0",
+    "sirv-cli": "^2.0.0"
   },
   "dependencies": {
     "gitpod-shared": "0.0.1",
+    "jsonc-parser": "^3.2.0",
     "vscode-nls": "^5.0.0"
   }
 }

extensions/gitpod-remote/package.nls.json

@@ -17,5 +17,13 @@
 	"stopSharingWorkspace": "Gitpod: Stop Sharing Running Workspace",
 	"openInStable": "Gitpod: Open in VS Code",
 	"openInInsiders": "Gitpod: Open in VS Code Insiders",
-	"openInBrowser": "Gitpod: Open in Browser"
+	"openInBrowser": "Gitpod: Open in Browser",
+	"makePrivate": "Make Private",
+	"makePublic": "Make Public",
+	"copyWebLink": "Copy web link",
+	"tunnelNetwork": "Tunnel on all interfaces",
+	"tunnelHost": "Tunnel on localhost",
+	"retryAutoExpose": "Retry to expose",
+	"openWebLinkInBrowser": "Open web link in Browser",
+	"showReleaseNotes": "Gitpod: Show Release Notes"
 }

extensions/gitpod-web/portsview/rollup.config.js renamed to extensions/gitpod-remote/rollup.config.js

@@ -5,14 +5,12 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
+import alias from '@rollup/plugin-alias';
 import css from 'rollup-plugin-css-only';
 import path from 'path';
 import copy from 'rollup-plugin-copy';
 import json from '@rollup/plugin-json';
 
-// copy before packet
-import './rollup.copy';
-
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
@@ -37,33 +35,42 @@ function serve() {
 }
 
 export default {
-	input: path.join(__dirname, 'src/main.ts'),
+	input: path.join(__dirname, '../gitpod-shared/portsview/src/main.ts'),
 	output: [
 		{
-			sourcemap: true,
-			format: 'iife',
-			name: 'app',
-			file: path.join(__dirname, 'public/bundle.js'),
+			sourcemap: !production,
+			format: 'es',
+			file: path.join(__dirname, './public/portsview.js'),
 		},
 	],
 	plugins: [
+		alias({
+			entries: [
+				{ find: 'package.nls.json', replacement: path.join(__dirname, 'package.nls.json') },
+			]
+		}),
 		svelte({
-			preprocess: sveltePreprocess({ sourceMap: !production }),
+			preprocess: sveltePreprocess({
+				typescript: {
+					tsconfigFile: '../gitpod-shared/portsview/tsconfig.json'
+				},
+				sourceMap: !production
+			}),
 			compilerOptions: {
 				// enable run-time checks when not in production
 				dev: !production
 			}
 		}),
 		copy({
 			targets: [
-				{ src: 'node_modules/@vscode/codicons/dist/codicon.ttf', dest: 'public' },
-				// { src: '../package.nls.json', dest: 'public' },
+				{ src: 'node_modules/@vscode/codicons/dist/codicon.css', dest: 'public' },
+				{ src: 'node_modules/@vscode/codicons/dist/codicon.ttf', dest: 'public' }
 			],
 		}),
-		json(),
+		json({ compact: true }),
 		// we'll extract any component CSS out into
 		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
+		css({ output: 'portsview.css' }),
 
 		// If you have external dependencies installed from
 		// npm, you'll most likely need these plugins. In
@@ -77,12 +84,13 @@ export default {
 		commonjs(),
 		typescript({
 			sourceMap: !production,
-			inlineSources: !production
+			inlineSources: !production,
+			tsconfig: '../gitpod-shared/portsview/tsconfig.json'
 		}),
 
 		// In dev mode, call `npm run start` once
 		// the bundle has been generated
-		!production && serve(),
+		// !production && serve(),
 
 		// Watch the `public` directory and refresh the
 		// browser on changes when not in production

extensions/gitpod-remote/src/extension.ts

@@ -7,6 +7,9 @@
 import { GitpodExtensionContext, registerTasks, setupGitpodContext, registerIpcHookCli } from 'gitpod-shared';
 import * as path from 'path';
 import * as vscode from 'vscode';
+import { configureMachineSettings } from './machineSettings';
+import { observePortsStatus, registerPortCommands, tunnelPorts } from './ports';
+import { GitpodPortViewProvider } from './portViewProvider';
 import { initializeRemoteExtensions, installInitialExtensions, ISyncExtension } from './remoteExtensionInit';
 
 let gitpodContext: GitpodExtensionContext | undefined;
@@ -19,6 +22,22 @@ export async function activate(context: vscode.ExtensionContext) {
 	registerTasks(gitpodContext);
 	installInitialExtensions(gitpodContext);
 
+	registerPortCommands(gitpodContext);
+	const portViewProvider = new GitpodPortViewProvider(gitpodContext);
+	context.subscriptions.push(vscode.window.registerWebviewViewProvider(GitpodPortViewProvider.viewType, portViewProvider, { webviewOptions: { retainContextWhenHidden: true } }));
+
+	const [onPortUpdate, disposePortObserve] = observePortsStatus(gitpodContext!);
+	context.subscriptions.push(disposePortObserve);
+	let initial = true;
+	context.subscriptions.push(onPortUpdate.event(portList => {
+		const promise = configureMachineSettings(gitpodContext!, portList);
+		if (initial) {
+			initial = false;
+			promise.then(() => tunnelPorts(portList));
+		}
+		portViewProvider.updatePortsStatus(portList);
+	}));
+
 	// We are moving the heartbeat to gitpod-desktop extension,
 	// so we register a command to cancel the heartbeat on the gitpod-remote extension
 	// and then gitpod-desktop will take care of it.