From ab323047219648b799b88c422cd38ecdb4d9d81c Mon Sep 17 00:00:00 2001 From: ewezy Date: Sat, 27 Jul 2024 12:49:41 +0800 Subject: [PATCH 1/4] Clean up deprecated prop --- ui/packages/lib/src/components/header/HeaderUserMenu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/packages/lib/src/components/header/HeaderUserMenu.js b/ui/packages/lib/src/components/header/HeaderUserMenu.js index e4aecf11..dde32da4 100644 --- a/ui/packages/lib/src/components/header/HeaderUserMenu.js +++ b/ui/packages/lib/src/components/header/HeaderUserMenu.js @@ -86,7 +86,6 @@ export const HeaderUserMenu = ({ profileObj, logout, children }) => { Log out From b5afa8568d3cd45aa6e1cf079bb096ae8d855ebe Mon Sep 17 00:00:00 2001 From: ewezy Date: Sat, 27 Jul 2024 12:52:54 +0800 Subject: [PATCH 2/4] Refactor caraml ai app into generic streamlit placeholders --- api/config/config.go | 5 +- api/models/v2/application.go | 15 ++++-- ui/packages/app/src/App.js | 10 +--- ui/packages/app/src/AppRoutes.js | 47 ++++++++++++------- ui/packages/app/src/config.js | 1 - .../StreamlitPlaceholderPage.js} | 9 ++-- .../lib/src/providers/application/context.js | 4 +- 7 files changed, 50 insertions(+), 41 deletions(-) rename ui/packages/app/src/{caraml_ai/CaraMLAIPage.js => streamlit_placeholder_page/StreamlitPlaceholderPage.js} (66%) diff --git a/api/config/config.go b/api/config/config.go index 7cb7e568..3394c37b 100644 --- a/api/config/config.go +++ b/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"` diff --git a/api/models/v2/application.go b/api/models/v2/application.go index 95721f94..db6f183c 100644 --- a/api/models/v2/application.go +++ b/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"` +} diff --git a/ui/packages/app/src/App.js b/ui/packages/app/src/App.js index e1008274..1d6e7423 100644 --- a/ui/packages/app/src/App.js +++ b/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 = () => ( @@ -26,17 +26,11 @@ const App = () => ( } /> }> - } /> + } /> } /> - { - config.CARAML_AI_STREAMLIT_HOMEPAGE && - }> - } /> - - } diff --git a/ui/packages/app/src/AppRoutes.js b/ui/packages/app/src/AppRoutes.js index 143a28b8..2bd5d5ed 100644 --- a/ui/packages/app/src/AppRoutes.js +++ b/ui/packages/app/src/AppRoutes.js @@ -1,26 +1,39 @@ -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 = () => ( - - {/* LANDING */} - } /> +export const AppRoutes = () => { + const { apps, isLoaded } = useContext(ApplicationsContext); - - {/* PROJECT LANDING PAGE */} - } /> - {/* PROJECT SETTING */} - } /> - {/* New Project */} - } /> - + // 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. + // Once those apps are loaded, AppRoutes will be re-rendered, + return isLoaded && ( + + {/* LANDING */} + } /> - {/* DEFAULT */} - } /> - -); + {apps?.map(app => !!app.streamlit_placeholder_page_config && + } />) + } + + + {/* PROJECT LANDING PAGE */} + } /> + {/* PROJECT SETTING */} + } /> + {/* New Project */} + } /> + + + {/* DEFAULT */} + } /> + + ) +}; export default AppRoutes; diff --git a/ui/packages/app/src/config.js b/ui/packages/app/src/config.js index d2a7e8a0..3a301dc0 100644 --- a/ui/packages/app/src/config.js +++ b/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") diff --git a/ui/packages/app/src/caraml_ai/CaraMLAIPage.js b/ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js similarity index 66% rename from ui/packages/app/src/caraml_ai/CaraMLAIPage.js rename to ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js index dc3892ad..b99a500f 100644 --- a/ui/packages/app/src/caraml_ai/CaraMLAIPage.js +++ b/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 = `` +export const StreamlitPlaceholderPage = ({ app }) => { + const iframe = `` function Iframe(props) { return (
); @@ -12,8 +11,8 @@ export const CaraMLAIPage = () => { diff --git a/ui/packages/lib/src/providers/application/context.js b/ui/packages/lib/src/providers/application/context.js index d254fde7..5e049311 100644 --- a/ui/packages/lib/src/providers/application/context.js +++ b/ui/packages/lib/src/providers/application/context.js @@ -9,7 +9,7 @@ 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)), @@ -17,7 +17,7 @@ export const ApplicationsContextProvider = ({ children }) => { ); return ( - + {children} ); From a185218ff78bf368b7de430d4cc331a646404d58 Mon Sep 17 00:00:00 2001 From: ewezy Date: Sat, 27 Jul 2024 12:57:51 +0800 Subject: [PATCH 3/4] Remove redundant comment --- ui/packages/app/src/AppRoutes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/packages/app/src/AppRoutes.js b/ui/packages/app/src/AppRoutes.js index 2bd5d5ed..b5b6bfd1 100644 --- a/ui/packages/app/src/AppRoutes.js +++ b/ui/packages/app/src/AppRoutes.js @@ -11,7 +11,6 @@ export const AppRoutes = () => { // 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. - // Once those apps are loaded, AppRoutes will be re-rendered, return isLoaded && ( {/* LANDING */} From ccc92d661b711d8317b73a1d570c323915199c73 Mon Sep 17 00:00:00 2001 From: ewezy Date: Mon, 29 Jul 2024 11:39:19 +0800 Subject: [PATCH 4/4] Remove references to streamlit --- api/models/v2/application.go | 16 ++++++++-------- ui/packages/app/src/AppRoutes.js | 8 ++++---- .../PlaceholderPage.js} | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) rename ui/packages/app/src/{streamlit_placeholder_page/StreamlitPlaceholderPage.js => placeholder_page/PlaceholderPage.js} (74%) diff --git a/api/models/v2/application.go b/api/models/v2/application.go index db6f183c..ed447f17 100644 --- a/api/models/v2/application.go +++ b/api/models/v2/application.go @@ -1,12 +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"` - StreamlitPlaceholderPageConfig *StreamlitPlaceholderPageConfig `json:"streamlit_placeholder_page_config"` + 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"` + PlaceholderPageConfig *PlaceholderPageConfig `json:"placeholder_page_config"` } type ApplicationConfig struct { @@ -20,6 +20,6 @@ type NavigationMenuItem struct { Destination string `json:"destination"` } -type StreamlitPlaceholderPageConfig struct { - StreamlitURL string `json:"streamlit_url"` +type PlaceholderPageConfig struct { + URL string `json:"url"` } diff --git a/ui/packages/app/src/AppRoutes.js b/ui/packages/app/src/AppRoutes.js index b5b6bfd1..a3a09314 100644 --- a/ui/packages/app/src/AppRoutes.js +++ b/ui/packages/app/src/AppRoutes.js @@ -3,21 +3,21 @@ 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 { PlaceholderPage } from "./placeholder_page/PlaceholderPage"; import { ApplicationsContext } from "@caraml-dev/ui-lib"; export const AppRoutes = () => { const { apps, isLoaded } = useContext(ApplicationsContext); - // If the apps have not been loaded yet, we do not render any of the app related routes - the additional streamlit + // If the apps have not been loaded yet, we do not render any of the app related routes - the additional placeholder // apps need to be retrieved from the MLP API v2/applications endpoint first before we generate each route for them. return isLoaded && ( {/* LANDING */} } /> - {apps?.map(app => !!app.streamlit_placeholder_page_config && - } />) + {apps?.map(app => !!app.placeholder_page_config && + } />) } diff --git a/ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js b/ui/packages/app/src/placeholder_page/PlaceholderPage.js similarity index 74% rename from ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js rename to ui/packages/app/src/placeholder_page/PlaceholderPage.js index b99a500f..a505b11a 100644 --- a/ui/packages/app/src/streamlit_placeholder_page/StreamlitPlaceholderPage.js +++ b/ui/packages/app/src/placeholder_page/PlaceholderPage.js @@ -1,8 +1,8 @@ import React from "react"; import { EuiPageTemplate } from "@elastic/eui"; -export const StreamlitPlaceholderPage = ({ app }) => { - const iframe = `` +export const PlaceholderPage = ({ app }) => { + const iframe = `` function Iframe(props) { return (
);