Support remote port forwarding

packages/dev-container/src/electron-node/remote-container-connection-provider.ts

@@ -149,6 +149,13 @@ interface ContainerTerminalSession {
     executeCommand(cmd: string, args?: string[]): Promise<{ stdout: string, stderr: string }>;
 }
 
+interface ContainerTerminalSession {
+    execution: Docker.Exec,
+    stdout: WriteStream,
+    stderr: WriteStream,
+    executeCommand(cmd: string, args?: string[]): Promise<{ stdout: string, stderr: string }>;
+}
+
 export class RemoteDockerContainerConnection implements RemoteConnection {
 
     id: string;
@@ -179,12 +186,12 @@ export class RemoteDockerContainerConnection implements RemoteConnection {
         this.container = options.container;
     }
 
-    async forwardOut(socket: Socket): Promise<void> {
+    async forwardOut(socket: Socket, port?: number): Promise<void> {
         const node = `${this.remoteSetupResult.nodeDirectory}/bin/node`;
         const devContainerServer = `${this.remoteSetupResult.applicationDirectory}/backend/dev-container-server.js`;
         try {
             const ttySession = await this.container.exec({
-                Cmd: ['sh', '-c', `${node} ${devContainerServer} -target-port=${this.remotePort}`],
+                Cmd: ['sh', '-c', `${node} ${devContainerServer} -target-port=${port ?? this.remotePort}`],
                 AttachStdin: true, AttachStdout: true, AttachStderr: true
             });
 

packages/remote/src/electron-browser/port-forwarding/port-forwading-contribution.ts

@@ -0,0 +1,33 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { nls } from '@theia/core';
+import { AbstractViewContribution } from '@theia/core/lib/browser';
+import { injectable } from '@theia/core/shared/inversify';
+import { PortForwardingWidget, PORT_FORWARDING_WIDGET_ID } from './port-forwarding-widget';
+
+@injectable()
+export class PortForwardingContribution extends AbstractViewContribution<PortForwardingWidget> {
+    constructor() {
+        super({
+            widgetId: PORT_FORWARDING_WIDGET_ID,
+            widgetName: nls.localizeByDefault('Ports'),
+            defaultWidgetOptions: {
+                area: 'bottom'
+            }
+        });
+    }
+}

packages/remote/src/electron-browser/port-forwarding/port-forwarding-service.ts

@@ -0,0 +1,84 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { Emitter } from '@theia/core';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { RemotePortForwardingProvider } from '../../electron-common/remote-port-forwarding-provider';
+
+export interface ForwardedPort {
+    localPort?: number;
+    address?: string;
+    origin?: string;
+    editing: boolean;
+}
+
+@injectable()
+export class PortForwardingService {
+
+    @inject(RemotePortForwardingProvider)
+    readonly provider: RemotePortForwardingProvider;
+
+    protected readonly onDidChangePortsEmitter = new Emitter<void>();
+    readonly onDidChangePorts = this.onDidChangePortsEmitter.event;
+
+    forwardedPorts: ForwardedPort[] = [];
+
+    forwardNewPort(origin?: string): ForwardedPort {
+        const index = this.forwardedPorts.push({ editing: true, origin });
+        return this.forwardedPorts[index - 1];
+    }
+
+    updatePort(port: ForwardedPort, newAdress: string): void {
+        const connectionPort = new URLSearchParams(location.search).get('port');
+        if (!connectionPort) {
+            // if there is no open remote connection we can't forward a port
+            return;
+        }
+
+        const parts = newAdress.split(':');
+        if (parts.length === 2) {
+            port.address = parts[0];
+            port.localPort = parseInt(parts[1]);
+        } else {
+            port.localPort = parseInt(parts[0]);
+        }
+
+        port.editing = false;
+
+        this.provider.forwardPort(parseInt(connectionPort), { port: port.localPort!, address: port.address });
+        this.onDidChangePortsEmitter.fire();
+    }
+
+    removePort(port: ForwardedPort): void {
+        const index = this.forwardedPorts.indexOf(port);
+        if (index !== -1) {
+            this.forwardedPorts.splice(index, 1);
+            this.provider.portRemoved({ port: port.localPort! });
+            this.onDidChangePortsEmitter.fire();
+        }
+    }
+
+    isValidAddress(address: string): boolean {
+        const match = address.match(/^(.*:)?\d+$/);
+        if (!match) {
+            return false;
+        }
+
+        const port = parseInt(address.includes(':') ? address.split(':')[1] : address);
+
+        return !this.forwardedPorts.some(p => p.localPort === port);
+    }
+}

packages/remote/src/electron-browser/port-forwarding/port-forwarding-widget.tsx

@@ -0,0 +1,140 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { OpenerService, ReactWidget } from '@theia/core/lib/browser';
+import { nls, URI } from '@theia/core';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { ForwardedPort, PortForwardingService } from './port-forwarding-service';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+
+export const PORT_FORWARDING_WIDGET_ID = 'port-forwarding-widget';
+
+@injectable()
+export class PortForwardingWidget extends ReactWidget {
+
+    @inject(PortForwardingService)
+    protected readonly portForwardingService: PortForwardingService;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    @inject(ClipboardService)
+    protected readonly clipboardService: ClipboardService;
+
+    @postConstruct()
+    protected init(): void {
+        this.id = PORT_FORWARDING_WIDGET_ID;
+        this.node.tabIndex = -1;
+        this.title.label = nls.localizeByDefault('Ports');
+        this.title.caption = this.title.label;
+        this.title.closable = true;
+        this.update();
+
+        this.portForwardingService.onDidChangePorts(() => this.update());
+    }
+
+    protected render(): ReactNode {
+        if (this.portForwardingService.forwardedPorts.length === 0) {
+            return <div>
+                <p style={{ marginLeft: 'calc(var(--theia-ui-padding) * 2)' }}>
+                    {nls.localizeByDefault('No forwarded ports. Forward a port to access your locally running services over the internet.\n[Forward a Port]({0})').split('\n')[0]}
+                </p>
+                {this.renderForwardPortButton()}
+            </div>;
+        }
+
+        return <div>
+            <table className='port-table'>
+                <thead>
+                    <tr>
+                        <th className='port-table-header'>{nls.localizeByDefault('Port')}</th>
+                        <th className='port-table-header'>{nls.localizeByDefault('Address')}</th>
+                        <th className='port-table-header'>{nls.localizeByDefault('Running Process')}</th>
+                        <th className='port-table-header'>{nls.localizeByDefault('Origin')}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {this.portForwardingService.forwardedPorts.map(port => (
+                        <tr key={port.localPort ?? 'editing'}>
+                            {this.renderPortColumn(port)}
+                            {this.renderAddressColumn(port)}
+                            <td></td>
+                            <td>{port.origin ? nls.localizeByDefault(port.origin) : ''}</td>
+                        </tr>
+                    ))}
+                    {!this.portForwardingService.forwardedPorts.some(port => port.editing) && <tr><td>{this.renderForwardPortButton()}</td></tr>}
+                </tbody>
+            </table>
+        </div>;
+    }
+
+    protected renderForwardPortButton(): ReactNode {
+        return <button className='theia-button' onClick={() => {
+            this.portForwardingService.forwardNewPort('User Forwarded');
+            this.update();
+        }
+        }>{nls.localizeByDefault('Forward a Port')}</button>;
+    }
+
+    protected renderAddressColumn(port: ForwardedPort): ReactNode {
+        const address = `${port.address ?? '0.0.0.0'}:${port.localPort}`;
+        return <td>
+            <div className='button-cell'>
+                <span style={{ flexGrow: 1 }} className='forwarded-address' onClick={async e => {
+                    if (e.ctrlKey) {
+                        const uri = new URI(`http://${address}`);
+                        (await this.openerService.getOpener(uri)).open(uri);
+                    }
+                }} title={nls.localizeByDefault('Follow link') + ' (ctrl/cmd + click)'}>
+                    {port.localPort ? address : ''}
+                </span>
+                {
+                    port.localPort &&
+                    <span className='codicon codicon-clippy action-label' title={nls.localizeByDefault('Copy Local Address')} onClick={() => {
+                        this.clipboardService.writeText(address);
+                    }}></span>
+                }
+            </div>
+        </td>;
+    }
+
+    protected renderPortColumn(port: ForwardedPort): ReactNode {
+        return port.editing ?
+            <td><PortEditingInput port={port} service={this.portForwardingService} /></td> :
+            <td>
+                <div className='button-cell'>
+                    <span style={{ flexGrow: 1 }}>{port.localPort}</span>
+                    <span className='codicon codicon-close action-label' title={nls.localizeByDefault('Stop Forwarding Port')} onClick={() => {
+                        this.portForwardingService.removePort(port);
+                        this.update();
+                    }}></span>
+                </div>
+            </td>;
+    }
+
+}
+
+function PortEditingInput({ port, service }: { port: ForwardedPort, service: PortForwardingService }): React.JSX.Element {
+    const [error, setError] = React.useState(false);
+    return <input className={`theia-input forward-port-button${error ? ' port-edit-input-error' : ''}`} port-edit-input-error={error}
+        autoFocus defaultValue={port.address ? `${port.address}:${port.localPort}` : port.localPort ?? ''}
+        placeholder={nls.localizeByDefault('Port number or address (eg. 3000 or 10.10.10.10:2000).')}
+        onKeyDown={e => e.key === 'Enter' && !error && service.updatePort(port, e.currentTarget.value)}
+        onKeyUp={e => setError(!service.isValidAddress(e.currentTarget.value))}></input>;
+
+}

packages/remote/src/electron-browser/remote-frontend-module.ts

@@ -16,7 +16,7 @@
 
 import { bindContributionProvider, CommandContribution } from '@theia/core';
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { FrontendApplicationContribution, WebSocketConnectionProvider } from '@theia/core/lib/browser';
+import { bindViewContribution, FrontendApplicationContribution, WidgetFactory } from '@theia/core/lib/browser';
 import { RemoteSSHContribution } from './remote-ssh-contribution';
 import { RemoteSSHConnectionProvider, RemoteSSHConnectionProviderPath } from '../electron-common/remote-ssh-connection-provider';
 import { RemoteFrontendContribution } from './remote-frontend-contribution';
@@ -26,6 +26,12 @@ import { RemoteStatusService, RemoteStatusServicePath } from '../electron-common
 import { ElectronFileDialogService } from '@theia/filesystem/lib/electron-browser/file-dialog/electron-file-dialog-service';
 import { RemoteElectronFileDialogService } from './remote-electron-file-dialog-service';
 import { bindRemotePreferences } from './remote-preferences';
+import { PortForwardingWidget, PORT_FORWARDING_WIDGET_ID } from './port-forwarding/port-forwarding-widget';
+import { PortForwardingContribution } from './port-forwarding/port-forwading-contribution';
+import { PortForwardingService } from './port-forwarding/port-forwarding-service';
+import { RemotePortForwardingProvider, RemoteRemotePortForwardingProviderPath } from '../electron-common/remote-port-forwarding-provider';
+import { ServiceConnectionProvider } from '@theia/core/lib/browser/messaging/service-connection-provider';
+import '../../src/electron-browser/style/port-forwarding-widget.css';
 
 export default new ContainerModule((bind, _, __, rebind) => {
     bind(RemoteFrontendContribution).toSelf().inSingletonScope();
@@ -42,8 +48,21 @@ export default new ContainerModule((bind, _, __, rebind) => {
 
     bind(RemoteService).toSelf().inSingletonScope();
 
+    bind(PortForwardingWidget).toSelf();
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: PORT_FORWARDING_WIDGET_ID,
+        createWidget: () => context.container.get<PortForwardingWidget>(PortForwardingWidget)
+    }));
+
+    bindViewContribution(bind, PortForwardingContribution);
+    bind(PortForwardingService).toSelf().inSingletonScope();
+
     bind(RemoteSSHConnectionProvider).toDynamicValue(ctx =>
-        WebSocketConnectionProvider.createLocalProxy<RemoteSSHConnectionProvider>(ctx.container, RemoteSSHConnectionProviderPath)).inSingletonScope();
+        ServiceConnectionProvider.createLocalProxy<RemoteSSHConnectionProvider>(ctx.container, RemoteSSHConnectionProviderPath)).inSingletonScope();
     bind(RemoteStatusService).toDynamicValue(ctx =>
-        WebSocketConnectionProvider.createLocalProxy<RemoteStatusService>(ctx.container, RemoteStatusServicePath)).inSingletonScope();
+        ServiceConnectionProvider.createLocalProxy<RemoteStatusService>(ctx.container, RemoteStatusServicePath)).inSingletonScope();
+
+    bind(RemotePortForwardingProvider).toDynamicValue(ctx =>
+        ServiceConnectionProvider.createLocalProxy<RemotePortForwardingProvider>(ctx.container, RemoteRemotePortForwardingProviderPath)).inSingletonScope();
+
 });

packages/remote/src/electron-browser/style/port-forwarding-widget.css

@@ -0,0 +1,44 @@
+/********************************************************************************
+ * Copyright (C) 2024 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.port-table {
+  width: 100%;
+  margin: calc(var(--theia-ui-padding) * 2);
+  table-layout: fixed;
+}
+
+.port-table-header {
+  text-align: left;
+}
+
+.forward-port-button {
+  margin-left: 0;
+  width: 100%;
+}
+
+.button-cell {
+  display: flex;
+  padding-right: var(--theia-ui-padding);
+}
+
+.forwarded-address:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.port-edit-input-error {
+  outline-color: var(--theia-inputValidation-errorBorder);
+}