feat(ui): Make CaraML AI placeholder app generic

api/config/config.go

@@ -119,9 +119,8 @@ type UIConfig struct {
 	StaticPath string `validated:"required"`
 	IndexPath  string `validated:"required"`
 
-	ClockworkUIHomepage       string `json:"REACT_APP_CLOCKWORK_UI_HOMEPAGE"`
-	KubeflowUIHomepage        string `json:"REACT_APP_KUBEFLOW_UI_HOMEPAGE"`
-	CaramlAIStreamlitHomepage string `json:"REACT_APP_CARAML_AI_STREAMLIT_HOMEPAGE"`
+	ClockworkUIHomepage string `json:"REACT_APP_CLOCKWORK_UI_HOMEPAGE"`
+	KubeflowUIHomepage  string `json:"REACT_APP_KUBEFLOW_UI_HOMEPAGE"`
 
 	AllowCustomStream        bool `json:"REACT_APP_ALLOW_CUSTOM_STREAM"`
 	AllowCustomTeam          bool `json:"REACT_APP_ALLOW_CUSTOM_TEAM"`

api/models/v2/application.go

@@ -1,11 +1,12 @@
 package models
 
 type Application struct {
-	Name              string             `json:"name" validate:"required"`
-	Description       string             `json:"description"`
-	Homepage          string             `json:"homepage"`
-	Configuration     *ApplicationConfig `json:"config" validate:"dive"`
-	IsProjectAgnostic bool               `json:"is_project_agnostic"`
+	Name                           string                          `json:"name" validate:"required"`
+	Description                    string                          `json:"description"`
+	Homepage                       string                          `json:"homepage"`
+	Configuration                  *ApplicationConfig              `json:"config" validate:"dive"`
+	IsProjectAgnostic              bool                            `json:"is_project_agnostic"`
+	StreamlitPlaceholderPageConfig *StreamlitPlaceholderPageConfig `json:"streamlit_placeholder_page_config"`
 }
 
 type ApplicationConfig struct {
@@ -18,3 +19,7 @@ type NavigationMenuItem struct {
 	Label       string `json:"label"`
 	Destination string `json:"destination"`
 }
+
+type StreamlitPlaceholderPageConfig struct {
+	StreamlitURL string `json:"streamlit_url"`
+}

ui/packages/app/src/App.js

@@ -3,6 +3,7 @@ import {
   ErrorBoundary,
   Login,
   MlpApiContextProvider,
+  ApplicationsContextProvider,
   Page404,
   Toast
 } from "@caraml-dev/ui-lib";
@@ -12,7 +13,6 @@ import { Route, Routes } from "react-router-dom";
 import AppRoutes from "./AppRoutes";
 import { PrivateLayout } from "./PrivateLayout";
 import config from "./config";
-import { CaraMLAIPage } from "./caraml_ai/CaraMLAIPage";
 
 const App = () => (
   <EuiProvider>
@@ -26,17 +26,11 @@ const App = () => (
             <Route path="/login" element={<Login />} />
 
             <Route element={<PrivateLayout />}>
-              <Route path="/*" element={<AppRoutes />} />
+              <Route path="/*" element={<ApplicationsContextProvider><AppRoutes /></ApplicationsContextProvider>} />
             </Route>
 
             <Route path="/pages/404" element={<Page404 />} />
 
-            {
-              config.CARAML_AI_STREAMLIT_HOMEPAGE &&
-              <Route element={<PrivateLayout />}>
-                <Route path="/caraml-ai" element={<CaraMLAIPage />} />
-              </Route>
-            }
           </Routes>
           <Toast />
         </AuthProvider>

ui/packages/app/src/AppRoutes.js

@@ -1,26 +1,38 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Home, Project } from "./pages";
 import { ProjectCreation } from "./project_setting/ProjectCreation";
 import ProjectSetting from "./project_setting/ProjectSetting";
 import { Navigate, Route, Routes } from "react-router-dom";
+import { StreamlitPlaceholderPage } from "./streamlit_placeholder_page/StreamlitPlaceholderPage";
+import { ApplicationsContext } from "@caraml-dev/ui-lib";
 
-export const AppRoutes = () => (
-  <Routes>
-    {/* LANDING */}
-    <Route index element={<Home />} />
+export const AppRoutes = () => {
+  const { apps, isLoaded } = useContext(ApplicationsContext);
 
-    <Route path="projects">
-      {/* PROJECT LANDING PAGE */}
-      <Route path=":projectId" element={<Project />} />
-      {/* PROJECT SETTING */}
-      <Route path=":projectId/settings/*" element={<ProjectSetting />} />
-      {/* New Project */}
-      <Route path="create" element={<ProjectCreation />} />
-    </Route>
+  // If the apps have not been loaded yet, we do not render any of the app related routes - the additional streamlit
+  // apps need to be retrieved from the MLP API v2/applications endpoint first before we generate each route for them.
+  return isLoaded && (
+    <Routes>
+      {/* LANDING */}
+      <Route index element={<Home />} />
 
-    {/* DEFAULT */}
-    <Route path="*" element={<Navigate to="/pages/404" replace={true} />} />
-  </Routes>
-);
+      {apps?.map(app => !!app.streamlit_placeholder_page_config &&
+        <Route key={app.name} path={app.homepage} element={<StreamlitPlaceholderPage app={app} />} />)
+      }
+
+      <Route path="projects">
+        {/* PROJECT LANDING PAGE */}
+        <Route path=":projectId" element={<Project />} />
+        {/* PROJECT SETTING */}
+        <Route path=":projectId/settings/*" element={<ProjectSetting />} />
+        {/* New Project */}
+        <Route path="create" element={<ProjectCreation />} />
+      </Route>
+
+      {/* DEFAULT */}
+      <Route path="*" element={<Navigate to="/pages/404" replace={true} />} />
+    </Routes>
+  )
+};
 
 export default AppRoutes;

ui/packages/app/src/config.js

@@ -33,7 +33,6 @@ const config = {
   ),
   CLOCKWORK_UI_HOMEPAGE: getEnv("REACT_APP_CLOCKWORK_UI_HOMEPAGE"),
   KUBEFLOW_UI_HOMEPAGE: getEnv("REACT_APP_KUBEFLOW_UI_HOMEPAGE"),
-  CARAML_AI_STREAMLIT_HOMEPAGE: getEnv("REACT_APP_CARAML_AI_STREAMLIT_HOMEPAGE"),
   ALLOW_CUSTOM_STREAM:
     getEnv("REACT_APP_ALLOW_CUSTOM_STREAM") != null
       ? getEnv("REACT_APP_ALLOW_CUSTOM_STREAM")

ui/packages/app/src/caraml_ai/CaraMLAIPage.js → ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { EuiPageTemplate } from "@elastic/eui";
-import config from "./../config";
 
-export const CaraMLAIPage = () => {
-  const iframe = `<iframe src=${config.CARAML_AI_STREAMLIT_HOMEPAGE} style="height: 80vh; width: 100%;"></iframe>`
+export const StreamlitPlaceholderPage = ({ app }) => {
+  const iframe = `<iframe src=${app.streamlit_placeholder_page_config.streamlit_url} style="height: 80vh; width: 100%;"></iframe>`
 
   function Iframe(props) {
     return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
@@ -12,8 +11,8 @@ export const CaraMLAIPage = () => {
     <EuiPageTemplate restrictWidth="90%" panelled={false}>
       <EuiPageTemplate.Header
         bottomBorder={false}
-        iconType="timelionApp"
-        pageTitle="CaraML AI"
+        iconType={app.config.icon}
+        pageTitle={app.name}
       />
 
       <EuiPageTemplate.Section paddingSize="none">

ui/packages/lib/src/components/header/HeaderUserMenu.js

@@ -86,7 +86,6 @@ export const HeaderUserMenu = ({ profileObj, logout, children }) => {
         <EuiContextMenuItem
           key="log_out"
           icon="exit"
-          toolTipPosition="right"
           onClick={logout}>
           Log out
         </EuiContextMenuItem>

ui/packages/lib/src/providers/application/context.js

@@ -9,15 +9,15 @@ const ApplicationsContext = React.createContext({
 
 export const ApplicationsContextProvider = ({ children }) => {
   const location = useLocation();
-  const [{ data: apps }] = useMlpApi("/v2/applications", {}, []);
+  const [{ data: apps, isLoaded }] = useMlpApi("/v2/applications", {}, []);
 
   const currentApp = useMemo(
     () => apps.find(a => location.pathname.startsWith(a.homepage)),
     [apps, location.pathname]
   );
 
   return (
-    <ApplicationsContext.Provider value={{ currentApp, apps }}>
+    <ApplicationsContext.Provider value={{ currentApp, apps, isLoaded }}>
       {children}
     </ApplicationsContext.Provider>
   );