ui: per-instance port for HttpRpcEngine (#160)

Author: colin-grant-work

ui/src/core/app_impl.ts

@@ -428,8 +428,8 @@ export class AppImpl implements App {
     return this.openTrace({...args, type: 'ARRAY_BUFFER', serializedAppState});
   }
 
-  openTraceFromHttpRpc() {
-    return this.openTrace({type: 'HTTP_RPC'});
+  openTraceFromHttpRpc(port?: string) {
+    return this.openTrace({type: 'HTTP_RPC', port});
   }
 
   private async openTrace(src: TraceSource): Promise<TraceImpl> {

ui/src/core/load_trace.ts

@@ -128,19 +128,23 @@ export async function loadTrace(
 ): Promise<TraceImpl> {
   updateStatus(traceSource, app, 'Opening trace');
   const engineId = `${++lastEngineId}`;
-  const engine = await createEngine(app, engineId);
+  const engine = await createEngine(app, engineId, traceSource);
   return await loadTraceIntoEngine(app, traceSource, engine);
 }
 
 async function createEngine(
   app: AppImpl,
   engineId: string,
+  traceSource: TraceSource,
 ): Promise<EngineBase> {
   // Check if there is any instance of the trace_processor_shell running in
   // HTTP RPC mode (i.e. trace_processor_shell -D).
   let useRpc = false;
+  const port =
+    (traceSource.type === 'HTTP_RPC' && traceSource.port) ||
+    HttpRpcEngine.defaultRpcPort;
   if (app.httpRpc.newEngineMode === 'USE_HTTP_RPC_IF_AVAILABLE') {
-    useRpc = (await HttpRpcEngine.checkConnection()).connected;
+    useRpc = (await HttpRpcEngine.checkConnection(port)).connected;
   }
   const descriptorBlobs: Uint8Array[] = [];
   if (app.extraParsingDescriptors.length > 0) {
@@ -151,7 +155,7 @@ async function createEngine(
   let engine;
   if (useRpc) {
     console.log('Opening trace using native accelerator over HTTP+RPC');
-    engine = new HttpRpcEngine(engineId);
+    engine = new HttpRpcEngine(engineId, port);
   } else {
     console.log('Opening trace using built-in WASM engine');
     engine = new WasmEngineProxy(engineId);
@@ -487,7 +491,7 @@ async function getTraceInfo(
       traceTitle += ` (${arrayBufferSizeMB} MB)`;
       break;
     case 'HTTP_RPC':
-      traceTitle = `RPC @ ${HttpRpcEngine.hostAndPort}`;
+      traceTitle = `RPC @ ${HttpRpcEngine.getHostAndPort()}`;
       break;
     default:
       break;

ui/src/core/trace_source.ts

@@ -51,6 +51,7 @@ export interface TraceStreamSource {
 
 export interface TraceHttpRpcSource {
   readonly type: 'HTTP_RPC';
+  readonly port?: string;
 }
 
 export interface TraceArrayBufferSource {

ui/src/frontend/index.ts

@@ -418,7 +418,11 @@ function onCssLoaded() {
   // accidentially clober the state of an open trace processor instance
   // otherwise.
   maybeChangeRpcPortFromFragment();
-  checkHttpRpcConnection().then(() => {
+  const source = AppImpl.instance.trace?.traceInfo.source;
+  const port =
+    (source?.type === 'HTTP_RPC' && source?.port) ||
+    HttpRpcEngine.defaultRpcPort;
+  checkHttpRpcConnection(port).then(() => {
     const route = Router.parseUrl(window.location.href);
     if (!AppImpl.instance.embeddedMode) {
       installFileDropHandler();
@@ -475,7 +479,7 @@ function maybeChangeRpcPortFromFragment() {
         ],
       });
     } else {
-      HttpRpcEngine.rpcPort = route.args.rpc_port;
+      HttpRpcEngine.defaultRpcPort = route.args.rpc_port;
     }
   }
 }

ui/src/frontend/rpc_http_dialog.ts

@@ -25,7 +25,7 @@ const CURRENT_API_VERSION =
   protos.TraceProcessorApiVersion.TRACE_PROCESSOR_CURRENT_API_VERSION;
 
 function getPromptMessage(tpStatus: protos.StatusResult): string {
-  return `Trace Processor detected on ${HttpRpcEngine.hostAndPort} with:
+  return `Trace Processor detected on ${HttpRpcEngine.getHostAndPort()} with:
 ${tpStatus.loadedTraceName}
 
 YES, use loaded trace:
@@ -47,7 +47,7 @@ Using the native accelerator has some minor caveats:
 }
 
 function getIncompatibleRpcMessage(tpStatus: protos.StatusResult): string {
-  return `The Trace Processor instance on ${HttpRpcEngine.hostAndPort} is too old.
+  return `The Trace Processor instance on ${HttpRpcEngine.getHostAndPort()} is too old.
 
 This UI requires TraceProcessor features that are not present in the
 Trace Processor native accelerator you are currently running.
@@ -69,7 +69,7 @@ Trace processor RPC API: ${tpStatus.apiVersion}
 }
 
 function getVersionMismatchMessage(tpStatus: protos.StatusResult): string {
-  return `The Trace Processor instance on ${HttpRpcEngine.hostAndPort} is a different build from the UI.
+  return `The Trace Processor instance on ${HttpRpcEngine.getHostAndPort()} is a different build from the UI.
 
 This may cause problems. Where possible it is better to use the matched version of the UI.
 You can do this by clicking the button below.
@@ -149,8 +149,8 @@ Trace processor RPC API: ${tpStatus.apiVersion}
 // trying to load a new trace. We do this ahead of time just to have a
 // consistent UX (i.e. so that the user can tell if the RPC is working without
 // having to open a trace).
-export async function checkHttpRpcConnection(): Promise<void> {
-  const state = await HttpRpcEngine.checkConnection();
+export async function checkHttpRpcConnection(port: string): Promise<void> {
+  const state = await HttpRpcEngine.checkConnection(port);
   AppImpl.instance.httpRpc.httpRpcAvailable = state.connected;
   if (!state.connected) {
     // No RPC = exit immediately to the WASM UI.

ui/src/trace_processor/http_rpc_engine.ts

@@ -36,17 +36,20 @@ export class HttpRpcEngine extends EngineBase {
   private isProcessingQueue = false;
 
   // Can be changed by frontend/index.ts when passing ?rpc_port=1234 .
-  static rpcPort = '9001';
+  static defaultRpcPort = '9001';
 
-  constructor(id: string) {
+  constructor(
+    id: string,
+    private port: string,
+  ) {
     super();
     this.id = id;
   }
 
   rpcSendRequestBytes(data: Uint8Array): void {
     if (this.websocket === undefined) {
       if (this.disposed) return;
-      const wsUrl = `ws://${HttpRpcEngine.hostAndPort}/websocket`;
+      const wsUrl = `ws://${HttpRpcEngine.getHostAndPort(this.port)}/websocket`;
       this.websocket = new WebSocket(wsUrl);
       this.websocket.onopen = () => this.onWebsocketConnected();
       this.websocket.onmessage = (e) => this.onWebsocketMessage(e);
@@ -108,8 +111,8 @@ export class HttpRpcEngine extends EngineBase {
     this.isProcessingQueue = false;
   }
 
-  static async checkConnection(): Promise<HttpRpcState> {
-    const RPC_URL = `http://${HttpRpcEngine.hostAndPort}/`;
+  static async checkConnection(port: string): Promise<HttpRpcState> {
+    const RPC_URL = `http://${HttpRpcEngine.getHostAndPort(port)}/`;
     const httpRpcState: HttpRpcState = {connected: false};
     console.info(
       `It's safe to ignore the ERR_CONNECTION_REFUSED on ${RPC_URL} below. ` +
@@ -137,8 +140,8 @@ export class HttpRpcEngine extends EngineBase {
     return httpRpcState;
   }
 
-  static get hostAndPort() {
-    return `127.0.0.1:${HttpRpcEngine.rpcPort}`;
+  static getHostAndPort(port = HttpRpcEngine.defaultRpcPort) {
+    return `127.0.0.1:${port}`;
   }
 
   [Symbol.dispose]() {