add subpath

capella_model_explorer/backend/explorer.py

@@ -10,7 +10,7 @@
 
 import capellambse
 import yaml
-from fastapi import FastAPI, Request
+from fastapi import APIRouter, FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
@@ -46,30 +46,32 @@ def __post_init__(self):
         )
         self.app.state.templates = Jinja2Templates(directory=PATH_TO_FRONTEND)
 
-        self.configure_routes()
+        router = APIRouter()
+        self.configure_routes(router)
+        self.app.include_router(router, prefix="/myapp")
 
-    def configure_routes(self):
-        self.app.mount(
+    def configure_routes(self, router: APIRouter):
+        router.mount(
             "/assets",
             StaticFiles(
                 directory=PATH_TO_FRONTEND.joinpath("assets"), html=True
             ),
         )
 
-        @self.app.get("/api/views")
+        @router.get("/api/views")
         def read_templates():
             # list all templates in the templates folder from .yaml
             self.grouped_templates, self.templates = index_templates(
                 self.templates_path
             )
             return self.grouped_templates
 
-        @self.app.get("/api/objects/{uuid}")
+        @router.get("/api/objects/{uuid}")
         def read_object(uuid: str):
             obj = self.model.by_uuid(uuid)
             return {"idx": obj.uuid, "name": obj.name, "type": obj.xtype}
 
-        @self.app.get("/api/views/{template_name}")
+        @router.get("/api/views/{template_name}")
         def read_template(template_name: str):
             template_name = urlparse.unquote(template_name)
             if not template_name in self.templates:
@@ -96,7 +98,7 @@ def read_template(template_name: str):
                 base["error"] = str(e)
             return base
 
-        @self.app.get("/api/views/{template_name}/{object_id}")
+        @router.get("/api/views/{template_name}/{object_id}")
         def render_template(template_name: str, object_id: str):
             content = None
             object = None
@@ -137,7 +139,7 @@ def render_template(template_name: str, object_id: str):
                 )
                 return HTMLResponse(content=error_message)
 
-        @self.app.get("/api/model-info")
+        @router.get("/api/model-info")
         def model_info():
             info = self.model.info
             return {
@@ -149,7 +151,7 @@ def model_info():
                 "badge": self.model.description_badge,
             }
 
-        @self.app.get("/{rest_of_path:path}")
+        @router.get("/{rest_of_path:path}")
         async def catch_all(request: Request, rest_of_path: str):
             del rest_of_path
             return self.app.state.templates.TemplateResponse(

entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+sed -i 's#__ROUTE_PREFIX__#'"$ROUTE_PREFIX"'#g' /app/frontend/dist/env.js
+exec "$@"

frontend/public/env.js

@@ -0,0 +1,3 @@
+window.env = {
+    ROUTE_PREFIX: '__ROUTE_PREFIX__',
+  };

frontend/src/App.jsx

@@ -13,14 +13,20 @@ import { HomeView } from './views/HomeView'
 
 function App() {
   const [count, setCount] = useState(0)
-
+
+  {
+    /*const BACKEND_URL = window.env.BACKEND_URL;*/
+  }  
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<HomeView/>} />
-        {/* <Route path="/views" element={<WiredTemplatesList endpoint="http://localhost:8000/api/views" />} /> */}
-        <Route path="/:templateName" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
-        <Route path="/:templateName/:objectID" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
+        <Route path="/" element={
+          <Routes>
+            <Route index element={<HomeView/>} />
+            <Route path="/:templateName" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
+            <Route path="/:templateName/:objectID" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
+          </Routes>
+        } />
       </Routes>
     </Router>
   )

frontend/src/components/WiredTemplatesList.jsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, {useState, useEffect} from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { ViewsList } from './ViewsList';
 import { API_BASE_URL } from '../APIConfig';
 
@@ -11,6 +11,7 @@ export const WiredTemplatesList = () => {
     const [templates, setTemplates] = useState([])
     const [error, setError] = useState(null);
     const navigate = useNavigate();
+    const location = useLocation();
 
     useEffect(() => {
         const fetchTemplates = async () => {
@@ -42,4 +43,10 @@ export const WiredTemplatesList = () => {
             }
         </div>);
     }
-    return <ViewsList templates={templates} cardClickCallback={(idx) => navigate(`/${idx}`, {state: {idx: idx}})} />;}
+    return (
+        <ViewsList 
+            templates={templates} 
+            cardClickCallback={(idx) => navigate(`/${location.pathname}/${idx}`, {state: {idx: idx}})}
+        />
+    );
+}