[mlx-ui] handle .js in static handler (#252)

don't modify the request url in static handler
if it's js file. we need dashboard_lib.bundle.js
if mlx servers on / prefix

Signed-off-by: Yihong Wang <[email protected]>

Author: yhwang

dashboard/origin-mlx/Dockerfile

@@ -1,5 +1,5 @@
 # base image
-FROM node:14
+FROM node:14-slim
 
 # create app directory
 RUN mkdir -p /workspace

dashboard/origin-mlx/server/server.ts

@@ -22,6 +22,7 @@ const {
   SESSION_SECRET          = randomBytes(64).toString('hex'),
   KUBEFLOW_USERID_HEADER  = 'kubeflow-userid',
   REACT_APP_DISABLE_LOGIN = 'false',
+  REACT_APP_RATE_LIMIT    = 100,
 } = process.env;
 
 const app = express() as Application;
@@ -66,7 +67,7 @@ app.use(REACT_APP_BASE_PATH, (req, res, next) => {
   if (staticIndex !== -1) {
     req.url = req.url.substring(staticIndex)
   }
-  else {
+  else if (!req.url.endsWith('.js')) {
     req.url = '/'
   }
   StaticHandler(staticDir)(req, res, next);
@@ -92,7 +93,7 @@ if (REACT_APP_BASE_PATH.length !== 0) {
 
 var limiter = new ratelimit({
   windowMs: 1*60*1000, // 1 minute
-  max: 5
+  max: REACT_APP_RATE_LIMIT
 });
 
 app.get('*', limiter, (req, res) => {

dashboard/origin-mlx/src/App.tsx

@@ -63,9 +63,13 @@ function App() {
     const { data, origin } = event;
     switch (data.type) {
     case 'iframe-connected':
-      const element = document.getElementById("iframe") as HTMLIFrameElement;
-      // TODO: get namespace from user info, use fixed value: mlx for now
-      element.contentWindow.postMessage({type: 'namespace-selected', value: 'mlx'}, origin);
+      ['iframe', 'iframe-run'].forEach((id) => {
+        const element = document.getElementById(id) as HTMLIFrameElement;
+        if (element) {
+          // TODO: get namespace from user info, use fixed value: mlx for now
+          element.contentWindow.postMessage({type: 'namespace-selected', value: 'mlx'}, origin);
+        }
+      })
       break;
     }
   });