Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ports view improvement #384

Merged
merged 1 commit into from
Jul 19, 2022
+35 −49
Merged

Ports view improvement #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions extensions/gitpod-web/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use setContext since config will not reflect to changes sometimes.

enabled=false and change to true but Ports view not shown

gitpodWorkspaceTreeDataProvider.updateIsPortsViewExperimentEnable(isPortsViewExperimentEnable ?? false);
updateStatusBar();
});
vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', isPortsViewExperimentEnable);
}

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