poc(caraml-ai): Set up CaraML AI mockup (caraml-dev#109)

* Update mlp app to serve new configs

* Add temporary caraml ai mockup ui

* Add isProjectAgnostic flag to CaraML AI app

* Fix navigation when a user selects a project while in a project agnostic app

Author: deadlycoconuts

api/config/config.go

@@ -119,8 +119,9 @@ 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"`
+	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"`
 
 	AllowCustomStream        bool `json:"REACT_APP_ALLOW_CUSTOM_STREAM"`
 	AllowCustomTeam          bool `json:"REACT_APP_ALLOW_CUSTOM_TEAM"`

api/models/v2/application.go

@@ -1,10 +1,11 @@
 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"`
+	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"`
 }
 
 type ApplicationConfig struct {

config-dev.yaml

@@ -47,6 +47,13 @@ applications:
     homepage: /pipeline
     configuration:
       iconName: pipelineApp
+  - name: CaraML AI
+    description: Gateway for accessing LLM models
+    homepage: /caraml-ai
+    isProjectAgnostic: true
+    configuration:
+      iconName: timelionApp
+
 
 database:
   host: "localhost"

ui/packages/app/src/App.js

@@ -12,6 +12,7 @@ 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>
@@ -29,6 +30,13 @@ const App = () => (
             </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/PrivateLayout.js

@@ -20,7 +20,8 @@ export const PrivateLayout = () => {
             {({ currentApp }) => (
               <Header
                 onProjectSelect={pId =>
-                  navigate(urlJoin(currentApp?.homepage, "projects", pId))
+                  // Return user to /projects/:projectId (MLP project landing page) if app is project agnostic
+                  navigate(urlJoin(currentApp?.is_project_agnostic ? "" : currentApp?.homepage, "projects", pId))
                 }
                 docLinks={config.DOC_LINKS}
               />

ui/packages/app/src/caraml_ai/CaraMLAIPage.js

@@ -0,0 +1,24 @@
+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>`
+
+  function Iframe(props) {
+    return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
+  }
+  return (
+    <EuiPageTemplate restrictWidth="90%" panelled={false}>
+      <EuiPageTemplate.Header
+        bottomBorder={false}
+        iconType="timelionApp"
+        pageTitle="CaraML AI"
+      />
+
+      <EuiPageTemplate.Section paddingSize="none">
+        <Iframe iframe={iframe} />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+  );
+};

ui/packages/app/src/config.js

@@ -31,9 +31,9 @@ const config = {
   MAX_AUTHZ_CACHE_EXPIRY_MINUTES: parseInt(
     getEnv("REACT_APP_MAX_AUTHZ_CACHE_EXPIRY_MINUTES") || "0"
   ),
-
   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/lib/src/components/nav_drawer/NavDrawer.js

@@ -55,13 +55,12 @@ export const NavDrawer = ({ docLinks }) => {
         className: isAppActive
           ? "euiTreeView__node---small---active"
           : "euiTreeView__node---small",
-
         callback: () =>
-          !children || !currentProject
+          a.is_project_agnostic ? (window.location.href = a.homepage) : (!children || !currentProject
             ? (window.location.href = !!currentProject
               ? urlJoin(a.homepage, "projects", currentProject.id)
               : a.homepage)
-            : {},
+            : {}),
         children: children
       };
     });