Add ability to load custom Experiment Engine UI

ui/.env

@@ -25,4 +25,12 @@ REACT_APP_OAUTH_CLIENT_ID=*** set clientId ***
 
 REACT_APP_MAX_ALLOWED_REPLICA=10
 
-REACT_APP_SENTRY_DSN
+REACT_APP_SENTRY_DSN=
+
+# Default Experiment Engine Remote UI settings.
+REACT_APP_DEFAULT_EXPERIMENT_ENGINE={"name":"","url":""}
+
+# JSON string map, key being the (unroutable) path used by the remote app for API calls,
+# and value being the URL to proxy to. Used only in local development mode, to bypass CORS.
+# More info: https://create-react-app.dev/docs/proxying-api-requests-in-development/
+REMOTE_COMPONENTS_PROXY_PATHS=

ui/.env.development

@@ -1,3 +1,3 @@
 REACT_APP_ENVIRONMENT=dev
 
-REACT_APP_TURING_API=http://localhost:8080/v1
+REACT_APP_TURING_API=http://localhost:8080/v1

ui/craco.config.js

@@ -0,0 +1,42 @@
+const { ModuleFederationPlugin } = require("webpack").container;
+// Remove source code dependency react-lazylog which causes problems with sharing
+const { ["react-lazylog"]: undefined, ...sharedDeps } = require("./package.json").dependencies;
+
+module.exports = ({ env }) => ({
+    plugins: [
+        {
+            plugin: {
+                overrideWebpackConfig: ({ webpackConfig }) => {
+                    // Suppress source-map related warnings (currently, react-use-dimensions is problematic).
+                    // This is setting was applied by CRA4, but CRA5 doesn't.
+                    webpackConfig.ignoreWarnings = [
+                        ...(webpackConfig.ignoreWarnings || []),
+                        /Failed to parse source map/,
+                    ];
+                    return webpackConfig;
+                },
+            },
+        }
+    ],
+    webpack: {
+        plugins: {
+            add: [
+                new ModuleFederationPlugin({
+                    name: "turing",
+                    shared: {
+                        ...sharedDeps,
+                        react: {
+                            shareScope: "default",
+                            singleton: true,
+                            requiredVersion: sharedDeps.react,
+                        },
+                        "react-dom": {
+                            singleton: true,
+                            requiredVersion: sharedDeps["react-dom"],
+                        },
+                    },
+                }),
+            ],
+        }
+    },
+});

ui/package.json

@@ -18,7 +18,6 @@
     "react-diff-viewer": "^3.1.1",
     "react-dom": "16.14.0",
     "react-lazylog": "git+https://github.com/gojekfarm/react-lazylog#master",
-    "react-scripts": "^4.0.3",
     "react-scroll": "^1.7.16",
     "react-scroll-to-bottom": "^4.0.0",
     "react-spinners": "^0.9.0",
@@ -29,25 +28,29 @@
     "yup": "^0.29.1"
   },
   "devDependencies": {
+    "@craco/craco": "6.3.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "10.4.4",
     "@testing-library/user-event": "^7.2.1",
     "husky": "^7.0.1",
     "lint-staged": "^11.1.2",
     "node-sass": "^6.0.1",
-    "prettier": "^2.3.2"
+    "prettier": "^2.4.0",
+    "react-scripts": "5.0.0-next.37"
+  },
+  "resolutions": {
+    "react-scripts/**/postcss-normalize": "10.0.1"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --jsx-bracket-same-line --write",
+      "prettier --bracket-same-line --write",
       "git add"
     ]
   },
   "scripts": {
-    "start": "PORT=3001 react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "PORT=3001 craco start --verbose",
+    "build": "craco build",
+    "test": "craco test",
     "lint": "eslint --max-warnings 0 src",
     "prepare": "cd ../ && husky install ui/.husky"
   },
@@ -66,4 +69,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

ui/src/App.js

@@ -16,6 +16,7 @@ import { RouterDetailsView } from "./router/details/RouterDetailsView";
 import { RouterVersionDetailsView } from "./router/versions/details/RouterVersionDetailsView";
 import { PrivateLayout } from "./PrivateLayout";
 import { ListEnsemblersView } from "./ensembler/list/ListEnsemblersView";
+import { ExperimentsRouter } from "./experiment/ExperimentsRouter";
 import { EnsemblingJobsRouter } from "./jobs/EnsemblingJobsRouter";
 import { useConfig } from "./config";
 
@@ -58,6 +59,12 @@ const App = () => {
               render={PrivateLayout(ListEnsemblersView)}
             />
 
+            {/* EXPERIMENTS */}
+            <PrivateRoute
+              path={`${appConfig.homepage}/projects/:projectId/experiments/*`}
+              render={PrivateLayout(ExperimentsRouter)}
+            />
+
             {/* CREATE ROUTER */}
             <PrivateRoute
               path={`${appConfig.homepage}/projects/:projectId/routers/create`}

ui/src/bootstrap.js

@@ -0,0 +1,33 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./assets/style.scss";
+import * as serviceWorker from "./serviceWorker";
+import App from "./App";
+import * as Sentry from "@sentry/browser";
+import { ConfigProvider, useConfig } from "./config";
+
+const SentryApp = ({ children }) => {
+  const {
+    sentryConfig: { dsn, environment, tags },
+  } = useConfig();
+
+  Sentry.init({ dsn, environment });
+  Sentry.setTags(tags);
+
+  return children;
+};
+
+const TuringUI = () => (
+  <ConfigProvider>
+    <SentryApp>
+      <App />
+    </SentryApp>
+  </ConfigProvider>
+);
+
+ReactDOM.render(TuringUI(), document.getElementById("root"));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

ui/src/config.js

@@ -79,13 +79,18 @@ const alertConfig = {
     appConfig.environment === "dev" ? "development" : appConfig.environment,
 };
 
+const defaultExperimentEngine = process.env.REACT_APP_DEFAULT_EXPERIMENT_ENGINE
+  ? JSON.parse(process.env.REACT_APP_DEFAULT_EXPERIMENT_ENGINE)
+  : {};
+
 const buildTimeConfig = {
   apiConfig,
   authConfig,
   appConfig,
   sentryConfig,
   resultLoggingConfig,
   alertConfig,
+  defaultExperimentEngine,
 };
 
 const ConfigContext = React.createContext({});

ui/src/experiment/ExperimentsRouter.js

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiText,
+} from "@elastic/eui";
+import { PageTitle } from "../components/page/PageTitle";
+
+import useDynamicScript from "../hooks/useDynamicScript";
+import loadComponent from "../utils/remoteComponent";
+import { useConfig } from "../config";
+
+const FallbackView = ({ text }) => (
+  <EuiPage>
+    <EuiPageBody>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <PageTitle title="Experiments" />
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiText size="s" color="subdued">
+          {text}
+        </EuiText>
+      </EuiPageContent>
+    </EuiPageBody>
+  </EuiPage>
+);
+
+const RemoteRouter = ({ projectId }) => {
+  const { defaultExperimentEngine } = useConfig();
+
+  // Retrieve script from host dynamically
+  const { ready, failed } = useDynamicScript({
+    url: defaultExperimentEngine.url,
+  });
+
+  if (!ready || failed) {
+    const text = !ready
+      ? "Loading Experiment Engine ..."
+      : "Failed to load Experiment Engine";
+    return <FallbackView text={text} />;
+  }
+
+  // Load component from remote host
+  const ExperimentsLandingPage = React.lazy(
+    loadComponent(defaultExperimentEngine.name, "./ExperimentsLandingPage")
+  );
+
+  return (
+    <React.Suspense fallback={<FallbackView text="Loading Experiments" />}>
+      <ExperimentsLandingPage projectId={projectId} />
+    </React.Suspense>
+  );
+};
+
+export const ExperimentsRouter = ({ projectId }) => {
+  const { defaultExperimentEngine } = useConfig();
+  return !!defaultExperimentEngine.url ? (
+    <RemoteRouter projectId />
+  ) : (
+    <FallbackView text="No default Experiment Engine configured" />
+  );
+};

ui/src/hooks/useDynamicScript.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+// Ref:
+// https://github.com/module-federation/module-federation-examples/blob/master/dynamic-system-host
+const useDynamicScript = (args) => {
+  const [ready, setReady] = React.useState(false);
+  const [failed, setFailed] = React.useState(false);
+
+  React.useEffect(() => {
+    const element = document.createElement("script");
+
+    // Append query string to prevent serving the cached version of the file
+    element.src = args.url + "?" + Math.floor(Date.now() / 1000);
+    element.type = "text/javascript";
+    element.async = true;
+
+    setReady(false);
+    setFailed(false);
+
+    element.onload = () => {
+      setReady(true);
+    };
+
+    element.onerror = () => {
+      console.error(`Dynamic Script Error: ${args.url}`);
+      setReady(false);
+      setFailed(true);
+    };
+
+    document.head.appendChild(element);
+
+    return () => {
+      document.head.removeChild(element);
+    };
+  }, [args.url]);
+
+  return {
+    ready,
+    failed,
+  };
+};
+
+export default useDynamicScript;

ui/src/index.js

@@ -1,33 +1 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./assets/style.scss";
-import * as serviceWorker from "./serviceWorker";
-import App from "./App";
-import * as Sentry from "@sentry/browser";
-import { ConfigProvider, useConfig } from "./config";
-
-const SentryApp = ({ children }) => {
-  const {
-    sentryConfig: { dsn, environment, tags },
-  } = useConfig();
-
-  Sentry.init({ dsn, environment });
-  Sentry.setTags(tags);
-
-  return children;
-};
-
-const TuringUI = () => (
-  <ConfigProvider>
-    <SentryApp>
-      <App />
-    </SentryApp>
-  </ConfigProvider>
-);
-
-ReactDOM.render(TuringUI(), document.getElementById("root"));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+import("./bootstrap");

ui/src/setupProxy.js

@@ -1,25 +1,40 @@
-const proxy = require("http-proxy-middleware");
+const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = function (app) {
+  // Proxy settings required for remote components' API calls.
+  const remoteProxyPaths = process.env.REMOTE_COMPONENTS_PROXY_PATHS
+    ? JSON.parse(process.env.REMOTE_COMPONENTS_PROXY_PATHS)
+    : {};
+  Object.keys(remoteProxyPaths).forEach((key) => {
+    app.use(
+      key,
+      createProxyMiddleware({
+        target: remoteProxyPaths[key],
+        pathRewrite: { ["^" + key]: "" },
+        changeOrigin: true,
+      })
+    );
+  });
+
   app.use(
     "/api/mlp",
-    proxy({
+    createProxyMiddleware({
       target: process.env.REACT_APP_MLP_API,
       pathRewrite: { "^/api/mlp": "" },
       changeOrigin: true,
     })
   );
   app.use(
     "/api/merlin",
-    proxy({
+    createProxyMiddleware({
       target: process.env.REACT_APP_MERLIN_API,
       pathRewrite: { "^/api/merlin": "" },
       changeOrigin: true,
     })
   );
   app.use(
     "/api/turing",
-    proxy({
+    createProxyMiddleware({
       target: process.env.REACT_APP_TURING_API,
       pathRewrite: { "^/api/turing": "" },
       changeOrigin: true,