Use ports order from supervisor

Author: mustard-mh

extensions/gitpod-web/src/extension.ts

@@ -363,6 +363,7 @@ async function registerPorts(context: GitpodExtensionContext): Promise<void> {
 	context.subscriptions.push(experiments);
 
 	const portMap = new Map<number, GitpodWorkspacePort>();
+	let portList: GitpodWorkspacePort[] = [];
 	const tunnelMap = new Map<number, vscode.TunnelDescription>();
 
 	// register tree view
@@ -394,11 +395,14 @@ async function registerPorts(context: GitpodExtensionContext): Promise<void> {
 						evts.on('error', reject);
 						evts.on('data', (update: PortsStatusResponse) => {
 							portMap.clear();
-							const portList = update.getPortsList().map(p => p.toObject());
-							for (const portStatus of portList) {
-								portMap.set(portStatus.localPort, new GitpodWorkspacePort(portStatus.localPort, portStatus, tunnelMap.get(portStatus.localPort)));
+							portList = [];
+							const tmpPortList = update.getPortsList().map(p => p.toObject());
+							for (const portStatus of tmpPortList) {
+								const port = new GitpodWorkspacePort(portStatus.localPort, portStatus, tunnelMap.get(portStatus.localPort));
+								portList.push(port);
+								portMap.set(portStatus.localPort, port);
 							}
-							portViewProvider.updatePortsStatus(portList);
+							portViewProvider.updatePortsStatus(tmpPortList);
 							gitpodWorkspaceTreeDataProvider.updatePortsStatus(update);
 						});
 					});
@@ -504,7 +508,8 @@ async function registerPorts(context: GitpodExtensionContext): Promise<void> {
 	async function updateStatusBar(): Promise<void> {
 		const exposedPorts: number[] = [];
 
-		for (const port of portMap.values()) {
+
+		for (const port of portList) {
 			if (isExposedServedGitpodWorkspacePort(port)) {
 				exposedPorts.push(port.status.localPort);
 			}

extensions/gitpod-web/src/portViewProvider.ts

@@ -16,6 +16,7 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
 	private _view?: vscode.WebviewView;
 
 	readonly portMap = new Map<number, GitpodWorkspacePort>();
+	private portList: GitpodWorkspacePort[] = [];
 
 	private readonly onDidExposeServedPortEmitter = new vscode.EventEmitter<ExposedServedGitpodWorkspacePort>();
 	readonly onDidExposeServedPort = this.onDidExposeServedPortEmitter.event;
@@ -82,6 +83,7 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
 		this.updating = true;
 		try {
 			if (!this.portStatus) { return; }
+			this.portList = [];
 			this.portStatus.forEach(e => {
 				const localPort = e.localPort;
 				const tunnel = this.tunnelsMap.get(localPort);
@@ -90,8 +92,10 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
 				if (!gitpodPort) {
 					gitpodPort = new GitpodWorkspacePort(localPort, e, tunnel);
 					this.portMap.set(localPort, gitpodPort);
+					this.portList.push(gitpodPort);
 				} else {
 					gitpodPort.update(e, tunnel);
+					this.portList.push(gitpodPort);
 				}
 				if (isExposedServedGitpodWorkspacePort(gitpodPort) && !isExposedServedPort(prevStatus)) {
 					this.onDidExposeServedPortEmitter.fire(gitpodPort);
@@ -105,8 +109,7 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider {
 	}
 
 	private updateHtml(): void {
-		const ports = Array.from(this.portMap.values()).map(e => e.toSvelteObject());
-		this._view?.webview.postMessage({ command: 'updatePorts', ports });
+		this._view?.webview.postMessage({ command: 'updatePorts', ports: this.portList.map(e => e.toSvelteObject()) });
 	}
 
 	private onHtmlCommand() {