Skip to content

Commit

Permalink
Improve ports view
Browse files Browse the repository at this point in the history
  • Loading branch information
@mustard-mh
mustard-mh committed Jul 29, 2022
1 parent 412debc commit 69d2355
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 49 deletions.
6 changes: 3 additions & 3 deletions extensions/gitpod-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,8 @@
"remote": [
{
"id": "gitpod.workspace",
"name": "Gitpod Workspace"
"name": "Gitpod Workspace",
"when": "!gitpod.portsView.visible"
}
],
"portsView": [
Expand All @@ -425,7 +426,6 @@
"type": "webview",
"contextualTitle": "",
"icon": "$(plug)",
"visibility": "visible",
"when": "gitpod.portsView.visible"
}
]
Expand Down Expand Up @@ -517,7 +517,7 @@
{
"id": "portsView",
"title": "Ports",
"icon": ""
"icon": "$(plug)"
}
]
}
Expand Down
6 changes: 1 addition & 5 deletions extensions/gitpod-web/portsview/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@
window.addEventListener("message", (event) => {
if (event.data.command === "updatePorts") {
// TODO: sort with status first, then port number?
ports = event.data.ports.sort(
(a: GitpodPortObject, b: GitpodPortObject) =>
a.status.localPort - b.status.localPort
);
ports = event.data.ports;
}
});
vscode.postMessage({ command: "queryPortData" });
Expand Down
72 changes: 31 additions & 41 deletions extensions/gitpod-web/src/extension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,6 @@ type GitpodWorkspaceElement = PortsTreeItem | PortTreeItem;
export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider<GitpodWorkspaceElement> {

readonly ports = new PortsTreeItem('Ports', vscode.TreeItemCollapsibleState.Expanded);
readonly portViewNotice = new PortsTreeItem('Please try new Ports view and provide your feedback', vscode.TreeItemCollapsibleState.None);

protected readonly onDidChangeTreeDataEmitter = new vscode.EventEmitter<GitpodWorkspaceElement | undefined>();
readonly onDidChangeTreeData = this.onDidChangeTreeDataEmitter.event;
Expand All @@ -293,12 +292,11 @@ export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider<
readonly onDidExposeServedPort = this.onDidExposeServedPortEmitter.event;


constructor(private readonly context: GitpodExtensionContext, private readonly isPortsViewExperimentEnable?: boolean) {
this.portViewNotice.iconPath = new vscode.ThemeIcon('info', new vscode.ThemeColor('foreground'));
this.portViewNotice.command = {
title: '',
command: 'gitpod.portsView.focus'
};
constructor(private readonly context: GitpodExtensionContext, private isPortsViewExperimentEnable?: boolean) { }

updateIsPortsViewExperimentEnable(value: boolean) {
this.isPortsViewExperimentEnable = value;
this.onDidChangeTreeDataEmitter.fire(undefined);
}

getTreeItem(element: GitpodWorkspaceElement): vscode.TreeItem {
Expand All @@ -310,11 +308,7 @@ export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider<
return [this.ports];
}
if (element === this.ports) {
const list: GitpodWorkspaceElement[] = [...this.ports.ports.values()];
if (this.isPortsViewExperimentEnable) {
list.unshift(this.portViewNotice);
}
return list;
return [...this.ports.ports.values()];
}
return [];
}
Expand Down Expand Up @@ -398,7 +392,7 @@ export type PortCommand = typeof PortCommands[number];
export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
public static readonly viewType = 'gitpod.portsView';

public _view?: vscode.WebviewView;
private _view?: vscode.WebviewView;

readonly portMap = new Map<number, GitpodWorkspacePort>();

Expand Down Expand Up @@ -432,11 +426,6 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'portsview', 'public', 'bundle.js'));
const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'portsview', 'public', 'bundle.css'));
const nonce = getNonce();
// <meta
// csp-nonce
// http-equiv="Content-Security-Policy"
// content="default-src 'none'; img-src data: ${webview.cspSource}; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'nonce-${nonce}'; script-src 'nonce-${nonce}';"
// />
return `<!DOCTYPE html>
<html lang="en">
<head>
Expand Down Expand Up @@ -527,8 +516,7 @@ export function getNonce() {
interface PortItem { port: GitpodWorkspacePort; isWebview?: boolean }

export function registerPorts(context: GitpodExtensionContext): void {
const experimentCfg = vscode.workspace.getConfiguration('gitpod.experimental');
const isPortsViewExperimentEnable = experimentCfg.get<boolean>('portsView.enabled');
const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get<boolean>('enabled');

const portMap = new Map<number, GitpodWorkspacePort>();
const tunnelMap = new Map<number, vscode.TunnelDescription>();
Expand All @@ -539,12 +527,8 @@ export function registerPorts(context: GitpodExtensionContext): void {
context.subscriptions.push(treeView);

// register webview
let portViewProvider: GitpodPortViewProvider | undefined;
if (isPortsViewExperimentEnable) {
vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', true);
portViewProvider = new GitpodPortViewProvider(context);
context.subscriptions.push(vscode.window.registerWebviewViewProvider(GitpodPortViewProvider.viewType, portViewProvider, { webviewOptions: { retainContextWhenHidden: true } }));
}
const portViewProvider = new GitpodPortViewProvider(context);
context.subscriptions.push(vscode.window.registerWebviewViewProvider(GitpodPortViewProvider.viewType, portViewProvider, { webviewOptions: { retainContextWhenHidden: true } }));

function openExternal(port: GitpodWorkspacePort) {
return vscode.env.openExternal(vscode.Uri.parse(port.localUrl));
Expand All @@ -570,7 +554,7 @@ export function registerPorts(context: GitpodExtensionContext): void {
const portNumber = e.getLocalPort();
portMap.set(portNumber, new GitpodWorkspacePort(portNumber, context, e, tunnelMap.get(portNumber)));
});
portViewProvider?.updatePortsStatus(update);
portViewProvider.updatePortsStatus(update);
gitpodWorkspaceTreeDataProvider.updatePortsStatus(update);
});
});
Expand Down Expand Up @@ -607,8 +591,8 @@ export function registerPorts(context: GitpodExtensionContext): void {
return false;
};
if (!tryResolve()) {
const listenerWebview = portViewProvider?.onDidChangePorts(element => {
if (element === portViewProvider?.portMap && tryResolve()) {
const listenerWebview = portViewProvider.onDidChangePorts(element => {
if (element === portViewProvider.portMap && tryResolve()) {
listenerWebview?.dispose();
}
});
Expand Down Expand Up @@ -694,15 +678,13 @@ export function registerPorts(context: GitpodExtensionContext): void {

portsStatusBarItem.text = text;
portsStatusBarItem.tooltip = tooltip;
const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get<boolean>('enabled');
portsStatusBarItem.command = isPortsViewExperimentEnable ? 'gitpod.portsView.focus' : 'gitpod.ports.reveal';
portsStatusBarItem.show();
}
updateStatusBar();
if (isPortsViewExperimentEnable && !!portViewProvider) {
context.subscriptions.push(portViewProvider.onDidChangePorts(() => updateStatusBar()));
} else {
context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidChangeTreeData(() => updateStatusBar()));
}

context.subscriptions.push(portViewProvider.onDidChangePorts(() => updateStatusBar()));
context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidChangeTreeData(() => updateStatusBar()));

context.subscriptions.push(vscode.commands.registerCommand('gitpod.ports.reveal', () => {
Expand Down Expand Up @@ -745,11 +727,7 @@ export function registerPorts(context: GitpodExtensionContext): void {
preserveFocus: true
});
}
let provider: GitpodWorkspaceTreeDataProvider | GitpodPortViewProvider = gitpodWorkspaceTreeDataProvider;
if (isPortsViewExperimentEnable && !!portViewProvider) {
provider = portViewProvider;
}
context.subscriptions.push(provider.onDidExposeServedPort(port => {
const onDidExposeServedPortListener = (port: ExposedServedGitpodWorkspacePort) => {
if (port.status.exposed.onExposed === OnPortExposedAction.IGNORE) {
return;
}
Expand All @@ -773,7 +751,9 @@ export function registerPorts(context: GitpodExtensionContext): void {
showOpenServiceNotification(port, port.status.exposed.visibility !== PortVisibility.PUBLIC);
return;
}
}));
};
context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidExposeServedPort(onDidExposeServedPortListener));
context.subscriptions.push(portViewProvider.onDidExposeServedPort(onDidExposeServedPortListener));

let updateTunnelsTokenSource: vscode.CancellationTokenSource | undefined;
async function updateTunnels(): Promise<void> {
Expand All @@ -791,7 +771,7 @@ export function registerPorts(context: GitpodExtensionContext): void {
currentTunnels.forEach(tunnel => {
tunnelMap.set(tunnel.remoteAddress.port, tunnel);
});
portViewProvider?.updateTunnels(tunnelMap);
portViewProvider.updateTunnels(tunnelMap);
gitpodWorkspaceTreeDataProvider.updateTunnels(tunnelMap);
}
updateTunnels();
Expand Down Expand Up @@ -839,6 +819,16 @@ export function registerPorts(context: GitpodExtensionContext): void {
vscode.commands.executeCommand('gitpod.api.connectLocalApp', apiPort);
}
}));
vscode.workspace.onDidChangeConfiguration((e: vscode.ConfigurationChangeEvent) => {
if (!e.affectsConfiguration('gitpod.experimental.portsView.enabled')) {
return;
}
const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get<boolean>('enabled');
vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', isPortsViewExperimentEnable);
gitpodWorkspaceTreeDataProvider.updateIsPortsViewExperimentEnable(isPortsViewExperimentEnable ?? false);
updateStatusBar();
});
vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', isPortsViewExperimentEnable);
}

export function registerWelcomeWalkthroughCommands(context: GitpodExtensionContext): void {
Expand Down

0 comments on commit 69d2355

Please sign in to comment.