Get kubeflow namespace from kfp UI

kubeflow · Nov 26, 2019 · 54006aa · 54006aa
1 parent e7b3bdd
commit 54006aa
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 4 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -27,6 +27,7 @@
       window.KFP_FLAGS={};
       window.KFP_FLAGS.DEPLOYMENT=null;
     </script>
+    <script id="kubeflow-client-placeholder"></script>
   </head>
   <body>
     <noscript>

diff --git a/frontend/server/server.ts b/frontend/server/server.ts
@@ -410,9 +410,14 @@ app.all(BASEPATH  + '/' + v1beta1Prefix + '/*', proxy({
 }));
 
 const DEFAULT_FLAG = 'window.KFP_FLAGS.DEPLOYMENT=null';
-function modifyFeatureFlags(indexHtml: string): string {
+const KUBEFLOW_CLIENT_PLACEHOLDER = '<script id="kubeflow-client-placeholder"></script>';
+function replaceRuntimeContent(indexHtml: string): string {
   if (DEPLOYMENT === Deployments.KUBEFLOW) {
-    return indexHtml.replace(DEFAULT_FLAG, 'window.KFP_FLAGS.DEPLOYMENT="KUBEFLOW"');
+    return indexHtml.replace(DEFAULT_FLAG, 'window.KFP_FLAGS.DEPLOYMENT="KUBEFLOW"')
+      .replace(
+        KUBEFLOW_CLIENT_PLACEHOLDER,
+        `<script id="kubeflow-client-placeholder" src="/dashboard_lib.bundle.js"></script>`
+      );
   } else {
     return indexHtml;
   }
@@ -428,15 +433,18 @@ fs.readFile(path.resolve(staticDir, 'index.html'), (err, data) => {
     indexHtml = data.toString();
     // sanity checking
     if (!indexHtml.includes(DEFAULT_FLAG)) {
-      throw new Error(`Error: cannot find DEFAULT_FLAG in index html. Its content: ${indexHtml}`);
+      throw new Error(`Error: cannot find default flag: '${DEFAULT_FLAG}' in index html. Its content: '${indexHtml}'.`);
+    }
+    if (!indexHtml.includes(KUBEFLOW_CLIENT_PLACEHOLDER)) {
+      throw new Error(`Error: cannot find kubeflow client placeholder: '${KUBEFLOW_CLIENT_PLACEHOLDER}' in index html. Its content: '${indexHtml}'.`)
     }
   }
 });
 
 function handleIndexHtml(req, res) {
   if (indexHtml) {
     res.contentType('text/html');
-    res.send(modifyFeatureFlags(indexHtml));
+    res.send(replaceRuntimeContent(indexHtml));
   } else {
     res.send(404);
   }

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { init as initKfClient } from './lib/KubeflowClient';
 import './CSSReset';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -25,6 +26,8 @@ import { HashRouter } from 'react-router-dom';
 
 // TODO: license headers
 
+initKfClient();
+
 cssRule('html, body, #root', {
   background: 'white',
   color: 'rgba(0, 0, 0, .66)',

diff --git a/frontend/src/lib/Flags.ts b/frontend/src/lib/Flags.ts
@@ -0,0 +1,11 @@
+export enum Deployments {
+  KUBEFLOW = 'KUBEFLOW',
+}
+
+export const KFP_FLAGS = {
+  DEPLOYMENT:
+    // tslint:disable-next-line:no-string-literal
+    window && window['KFP_FLAGS'] && window['KFP_FLAGS']['DEPLOYMENT'] === Deployments.KUBEFLOW
+      ? Deployments.KUBEFLOW
+      : undefined,
+};
diff --git a/frontend/src/lib/KubeflowClient.ts b/frontend/src/lib/KubeflowClient.ts
@@ -0,0 +1,32 @@
+import { KFP_FLAGS, Deployments } from './Flags';
+import { logger } from './Utils';
+
+declare global {
+  interface Window {
+    // Provided by:
+    // 1. https://github.com/kubeflow/kubeflow/tree/master/components/centraldashboard#client-side-library
+    // 2. /frontend/server/server.ts -> KUBEFLOW_CLIENT_PLACEHOLDER
+    centraldashboard: any;
+  }
+}
+
+export function init(): void {
+  if (KFP_FLAGS.DEPLOYMENT !== Deployments.KUBEFLOW) {
+    return;
+  }
+
+  try {
+    // Init method will invoke the callback with the event handler instance
+    // and a boolean indicating whether the page is iframed or not
+    window.centraldashboard.CentralDashboardEventHandler.init((cdeh: any) => {
+      // Binds a callback that gets invoked anytime the Dashboard's
+      // namespace is changed
+      cdeh.onNamespaceSelected = (namespace: string) => {
+        // tslint:disable-next-line:no-console
+        console.log('Namespace changed to', namespace);
+      };
+    });
+  } catch (err) {
+    logger.error('Failed to initialize central dashboard client', err);
+  }
+}