Optionally perform sandbox execution via the WebSocket

shepmaster · shepmaster · commit cf3d2cf24d9b · 2023-02-24T12:59:53.000-05:00
diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts
@@ -1,13 +1,15 @@
 import fetch from 'isomorphic-fetch';
 import { ThunkAction as ReduxThunkAction } from 'redux-thunk';
 import url, { UrlObject } from 'url';
+import { z } from 'zod';
 
 import {
   clippyRequestSelector,
   formatRequestSelector,
   getCrateType,
   isAutoBuildSelector,
   runAsTest,
+  useWebsocketSelector,
 } from './selectors';
 import State from './state';
 import {
@@ -128,7 +130,27 @@ export enum ActionType {
   NotificationSeen = 'NOTIFICATION_SEEN',
   BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
   SplitRatioChanged = 'SPLIT_RATIO_CHANGED',
-}
+  WebSocketError = 'WEBSOCKET_ERROR',
+  WebSocketConnected = 'WEBSOCKET_CONNECTED',
+  WebSocketDisconnected = 'WEBSOCKET_DISCONNECTED',
+  WebSocketFeatureFlagEnabled = 'WEBSOCKET_FEATURE_FLAG_ENABLED',
+  WSExecuteRequest = 'WS_EXECUTE_REQUEST',
+  WSExecuteResponse = 'WS_EXECUTE_RESPONSE',
+}
+
+const ExecuteExtra = z.object({
+  isAutoBuild: z.boolean(),
+});
+type ExecuteExtra = z.infer<typeof ExecuteExtra>;
+
+export const WSExecuteResponse = z.object({
+  type: z.literal(ActionType.WSExecuteResponse),
+  success: z.boolean(),
+  stdout: z.string(),
+  stderr: z.string(),
+  extra: ExecuteExtra,
+});
+export type WSExecuteResponse = z.infer<typeof WSExecuteResponse>;
 
 export const initializeApplication = () => createAction(ActionType.InitializeApplication);
 
@@ -284,18 +306,23 @@ interface ExecuteRequestBody {
 }
 
 const performCommonExecute = (crateType: string, tests: boolean): ThunkAction => (dispatch, getState) => {
-  dispatch(requestExecute());
-
   const state = getState();
   const { code, configuration: { channel, mode, edition } } = state;
   const backtrace = state.configuration.backtrace === Backtrace.Enabled;
   const isAutoBuild = isAutoBuildSelector(state);
 
-  const body: ExecuteRequestBody = { channel, mode, edition, crateType, tests, code, backtrace };
 
-  return jsonPost<ExecuteResponseBody>(routes.execute, body)
-    .then(json => dispatch(receiveExecuteSuccess({ ...json, isAutoBuild })))
-    .catch(json => dispatch(receiveExecuteFailure({ ...json, isAutoBuild })));
+  if (useWebsocketSelector(state)) {
+    return dispatch(wsExecuteRequest(channel, mode, edition, crateType, tests, code, backtrace, { isAutoBuild }));
+  } else {
+    dispatch(requestExecute());
+
+    const body: ExecuteRequestBody = { channel, mode, edition, crateType, tests, code, backtrace };
+
+    return jsonPost<ExecuteResponseBody>(routes.execute, body)
+      .then(json => dispatch(receiveExecuteSuccess({ ...json, isAutoBuild })))
+      .catch(json => dispatch(receiveExecuteFailure({ ...json, isAutoBuild })));
+  }
 };
 
 function performAutoOnly(): ThunkAction {
@@ -476,6 +503,17 @@ const PRIMARY_ACTIONS: { [index in PrimaryAction]: () => ThunkAction } = {
   [PrimaryActionCore.Wasm]: performCompileToNightlyWasmOnly,
 };
 
+const wsExecuteRequest = (
+  channel: Channel,
+  mode: Mode,
+  edition: Edition,
+  crateType: string,
+  tests: boolean,
+  code: string,
+  backtrace: boolean,
+  extra: ExecuteExtra,
+) => createAction(ActionType.WSExecuteRequest, { channel, mode, edition, crateType, tests, code, backtrace, extra });
+
 export const performPrimaryAction = (): ThunkAction => (dispatch, getState) => {
   const state = getState();
   const primaryAction = PRIMARY_ACTIONS[state.configuration.primaryAction];
@@ -813,6 +851,11 @@ export const browserWidthChanged = (isSmall: boolean) =>
 export const splitRatioChanged = () =>
   createAction(ActionType.SplitRatioChanged);
 
+export const websocketError = () => createAction(ActionType.WebSocketError);
+export const websocketConnected = () => createAction(ActionType.WebSocketConnected);
+export const websocketDisconnected = () => createAction(ActionType.WebSocketDisconnected);
+export const websocketFeatureFlagEnabled = () => createAction(ActionType.WebSocketFeatureFlagEnabled);
+
 function parseChannel(s?: string): Channel | null {
   switch (s) {
     case 'stable':
@@ -966,4 +1009,10 @@ export type Action =
   | ReturnType<typeof notificationSeen>
   | ReturnType<typeof browserWidthChanged>
   | ReturnType<typeof splitRatioChanged>
+  | ReturnType<typeof websocketError>
+  | ReturnType<typeof websocketConnected>
+  | ReturnType<typeof websocketDisconnected>
+  | ReturnType<typeof websocketFeatureFlagEnabled>
+  | ReturnType<typeof wsExecuteRequest>
+  | WSExecuteResponse
   ;
diff --git a/ui/frontend/configureStore.ts b/ui/frontend/configureStore.ts
@@ -8,9 +8,11 @@ import { Action, initializeApplication } from './actions';
 import initializeLocalStorage from './local_storage';
 import initializeSessionStorage from './session_storage';
 import playgroundApp, { State } from './reducers';
+import { websocketMiddleware } from './websocketMiddleware';
 
 export default function configureStore(window: Window) {
   const baseUrl = url.resolve(window.location.href, '/');
+  const websocket = websocketMiddleware(window);
 
   const initialGlobalState = {
     globalConfiguration: {
@@ -29,7 +31,7 @@ export default function configureStore(window: Window) {
     sessionStorage.initialState,
   );
 
-  const middlewares = applyMiddleware<ThunkDispatch<State, {}, Action>, {}>(thunk);
+  const middlewares = applyMiddleware<ThunkDispatch<State, {}, Action>, {}>(thunk, websocket);
   const composeEnhancers: typeof compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   const enhancers = composeEnhancers(middlewares);
   const store = createStore(playgroundApp, initialState, enhancers);
diff --git a/ui/frontend/declarations.d.ts b/ui/frontend/declarations.d.ts
@@ -21,6 +21,5 @@ interface Window {
   rustPlayground: {
     setCode(code: string): void;
     disableSyncChangesToStorage(): void;
-    webSocket: WebSocket | null;
   };
 }
diff --git a/ui/frontend/index.tsx b/ui/frontend/index.tsx
@@ -19,19 +19,21 @@ import {
   performVersionsLoad,
   reExecuteWithBacktrace,
   browserWidthChanged,
+  websocketFeatureFlagEnabled,
 } from './actions';
 import { configureRustErrors } from './highlighting';
 import PageSwitcher from './PageSwitcher';
 import playgroundApp from './reducers';
 import Router from './Router';
 import configureStore from './configureStore';
-import openWebSocket from './websocket';
-
-// openWebSocket() may return null.
-const socket = openWebSocket(window.location);
 
 const store = configureStore(window);
 
+const params = new URLSearchParams(window.location.search);
+if (params.has('websocket')) {
+  store.dispatch(websocketFeatureFlagEnabled());
+}
+
 const z = (evt: MediaQueryList | MediaQueryListEvent) => { store.dispatch(browserWidthChanged(evt.matches)); };
 
 const maxWidthMediaQuery = window.matchMedia('(max-width: 1600px)');
@@ -57,9 +59,6 @@ window.rustPlayground = {
   disableSyncChangesToStorage: () => {
     store.dispatch(disableSyncChangesToStorage());
   },
-  // Temporarily storing this as a global to prevent it from being
-  // garbage collected (at least by Safari).
-  webSocket: socket,
 };
 
 const container = document.getElementById('playground');
diff --git a/ui/frontend/package.json b/ui/frontend/package.json
@@ -29,7 +29,8 @@
     "reselect": "^4.0.0",
     "route-parser": "^0.0.5",
     "split-grid": "^1.0.9",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "zod": "^3.20.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
diff --git a/ui/frontend/reducers/index.ts b/ui/frontend/reducers/index.ts
@@ -11,6 +11,7 @@ import page from './page';
 import position from './position';
 import selection from './selection';
 import versions from './versions';
+import websocket from './websocket';
 
 const playgroundApp = combineReducers({
   browser,
@@ -24,6 +25,7 @@ const playgroundApp = combineReducers({
   position,
   selection,
   versions,
+  websocket,
 });
 
 export type State = ReturnType<typeof playgroundApp>;
diff --git a/ui/frontend/reducers/output/execute.ts b/ui/frontend/reducers/output/execute.ts
@@ -17,6 +17,7 @@ interface State {
 export default function execute(state = DEFAULT, action: Action) {
   switch (action.type) {
     case ActionType.ExecuteRequest:
+    case ActionType.WSExecuteRequest:
       return start(DEFAULT, state);
     case ActionType.ExecuteSucceeded: {
       const { stdout = '', stderr = '', isAutoBuild } = action;
@@ -26,6 +27,10 @@ export default function execute(state = DEFAULT, action: Action) {
       const { error, isAutoBuild } = action;
       return finish(state, { error, isAutoBuild });
     }
+    case ActionType.WSExecuteResponse: {
+      const { stdout, stderr, extra: { isAutoBuild } } = action;
+      return finish(state, { stdout, stderr, isAutoBuild });
+    }
     default:
       return state;
   }
diff --git a/ui/frontend/reducers/output/meta.ts b/ui/frontend/reducers/output/meta.ts
@@ -38,6 +38,7 @@ export default function meta(state = DEFAULT, action: Action) {
       return { ...state, focus: Focus.Asm };
 
     case ActionType.ExecuteRequest:
+    case ActionType.WSExecuteRequest:
       return { ...state, focus: Focus.Execute };
 
     case ActionType.RequestFormat:
diff --git a/ui/frontend/reducers/websocket.ts b/ui/frontend/reducers/websocket.ts
@@ -0,0 +1,30 @@
+import { Action, ActionType } from '../actions';
+
+export type State = {
+  connected: boolean;
+  featureFlagEnabled: boolean;
+};
+
+const DEFAULT: State = {
+  connected: false,
+  featureFlagEnabled: false,
+};
+
+export default function websocket(state = DEFAULT, action: Action): State {
+  switch (action.type) {
+    case ActionType.WebSocketConnected:
+      return { ...state, connected: true };
+
+    case ActionType.WebSocketDisconnected:
+      return { ...state, connected: false };
+
+    case ActionType.WebSocketError:
+      return { ...state };
+
+    case ActionType.WebSocketFeatureFlagEnabled:
+      return { ...state, featureFlagEnabled: true };
+
+    default:
+      return state;
+  }
+}
diff --git a/ui/frontend/selectors/index.ts b/ui/frontend/selectors/index.ts
@@ -334,3 +334,12 @@ export const offerCrateAutocompleteOnUse = createSelector(
   editionSelector,
   (edition) => edition !== Edition.Rust2015,
 );
+
+const websocket = (state: State) => state.websocket;
+
+export const websocketFeatureFlagEnabled = createSelector(websocket, (ws) => ws.featureFlagEnabled);
+
+export const useWebsocketSelector = createSelector(
+  websocket,
+  (ws) => ws.connected && ws.featureFlagEnabled,
+);
diff --git a/ui/frontend/websocket.ts b/ui/frontend/websocket.ts
diff --git a/ui/frontend/websocketMiddleware.ts b/ui/frontend/websocketMiddleware.ts
@@ -0,0 +1,76 @@
+import { Middleware } from 'redux';
+import { z } from 'zod';
+
+import { ActionType, websocketError, websocketConnected, websocketDisconnected, WSExecuteResponse } from './actions';
+
+const WSMessageResponse = z.discriminatedUnion('type', [WSExecuteResponse]);
+
+const reportWebSocketError = async () => {
+  try {
+    await fetch('/nowebsocket', {
+      method: 'post',
+      headers: {
+        'Content-Length': '0',
+      },
+    });
+  } catch (reportError) {
+    console.log('Unable to report WebSocket error', reportError);
+  }
+}
+
+const openWebSocket = (currentLocation: Location) => {
+  try {
+    const wsProtocol = currentLocation.protocol === 'https:' ? 'wss://' : 'ws://';
+    const wsUri = [wsProtocol, currentLocation.host, '/websocket'].join('');
+    return new WebSocket(wsUri);
+  } catch (e) {
+    // WebSocket URL error or WebSocket is not supported by browser.
+    // Assume it's the second case since URL error is easy to notice.
+    reportWebSocketError()
+
+    return null;
+  }
+}
+
+export const websocketMiddleware = (window: Window): Middleware => store => {
+  const socket = openWebSocket(window.location);
+
+  if (socket) {
+    socket.addEventListener('open', () => {
+      store.dispatch(websocketConnected());
+    });
+
+    socket.addEventListener('close', () => {
+      store.dispatch(websocketDisconnected());
+    });
+
+    socket.addEventListener('error', () => {
+      store.dispatch(websocketError());
+      reportWebSocketError();
+    });
+
+    // TODO: reconnect on error? (if ever connected? if < n failures?)
+
+    socket.addEventListener('message', (event) => {
+      try {
+        const rawMessage = JSON.parse(event.data);
+        const message = WSMessageResponse.parse(rawMessage);
+        store.dispatch(message);
+      } catch (e) {
+        console.log('Unable to parse WebSocket message', event.data, e);
+      }
+    });
+  }
+
+  return next => action => {
+    if (socket && socket.readyState == socket.OPEN && sendActionOnWebsocket(action)) {
+      const message = JSON.stringify(action);
+      socket.send(message);
+    }
+
+    next(action);
+  };
+}
+
+const sendActionOnWebsocket = (action: any): boolean =>
+  action.type === ActionType.WSExecuteRequest;
diff --git a/ui/frontend/yarn.lock b/ui/frontend/yarn.lock
@@ -6410,3 +6410,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^3.20.3:
+  version "3.20.3"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.20.3.tgz#56b2ebb87d4566e7cd38f0f6cda7fa591fcec948"
+  integrity sha512-+MLeeUcLTlnzVo5xDn9+LVN9oX4esvgZ7qfZczBN+YVUvZBafIrPPVyG2WdjMWU2Qkb2ZAh2M8lpqf1wIoGqJQ==
diff --git a/ui/src/main.rs b/ui/src/main.rs
@@ -178,6 +178,8 @@ pub enum Error {
     GistLoading { source: octocrab::Error },
     #[snafu(display("{PLAYGROUND_GITHUB_TOKEN} not set up for reading/writing gists"))]
     NoGithubToken,
+    #[snafu(display("Unable to deserialize request: {}", source))]
+    Deserialization { source: serde_json::Error },
     #[snafu(display("Unable to serialize response: {}", source))]
     Serialization { source: serde_json::Error },
     #[snafu(display("The value {:?} is not a valid target", value))]
diff --git a/ui/src/server_axum.rs b/ui/src/server_axum.rs
diff --git a/ui/src/server_axum/websocket.rs b/ui/src/server_axum/websocket.rs

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,5 @@ interface Window {`
`21`	`21`	`rustPlayground: {`
`22`	`22`	`setCode(code: string): void;`
`23`	`23`	`disableSyncChangesToStorage(): void;`
`24`		`- webSocket: WebSocket \| null;`
`25`	`24`	`};`
`26`	`25`	`}`