fix: UI working behind base url (#3514)

* fix: UI working behind base url Signed-off-by: Hai Nguyen <quanghai.ng1512@gmail.com> * fix: assign empty string as default value for PUBLIC URL Signed-off-by: Hai Nguyen <quanghai.ng1512@gmail.com> * fix: add comma due to linter Signed-off-by: Hai Nguyen <quanghai.ng1512@gmail.com> --------- Signed-off-by: Hai Nguyen <quanghai.ng1512@gmail.com>
feast-dev · Mar 12, 2023 · 9a3fd98 · 9a3fd98
1 parent ec1e61d
commit 9a3fd98
Show file tree

Hide file tree

Showing 22 changed files with 59 additions and 55 deletions.
diff --git a/sdk/python/feast/ui_server.py b/sdk/python/feast/ui_server.py
@@ -13,11 +13,9 @@
 
 def get_app(
     store: "feast.FeatureStore",
-    get_registry_dump: Callable,
     project_id: str,
     registry_ttl_secs: int,
-    host: str,
-    port: int,
+    root_path: str = "",
 ):
     app = FastAPI()
 
@@ -62,7 +60,7 @@ def shutdown_event():
                     "name": "Project",
                     "description": "Test project",
                     "id": project_id,
-                    "registryPath": "/registry",
+                    "registryPath": f"{root_path}/registry",
                 }
             ]
         }
@@ -105,11 +103,8 @@ def start_server(
 ):
     app = get_app(
         store,
-        get_registry_dump,
         project_id,
         registry_ttl_sec,
-        host,
-        port,
+        root_path,
     )
-    assert root_path is not None
-    uvicorn.run(app, host=host, port=port, root_path=root_path)
+    uvicorn.run(app, host=host, port=port)
diff --git a/ui/src/FeastUISansProviders.tsx b/ui/src/FeastUISansProviders.tsx
@@ -62,6 +62,8 @@ const FeastUISansProviders = ({
           isCustom: true,
         }
       : { projectsListPromise: defaultProjectListPromise(), isCustom: false };
+
+  const BASE_URL = process.env.PUBLIC_URL || ""
 
   return (
     <EuiProvider colorMode="light">
@@ -74,9 +76,9 @@ const FeastUISansProviders = ({
           >
             <ProjectListContext.Provider value={projectListContext}>
               <Routes>
-                <Route path="/" element={<Layout />}>
+                <Route path={BASE_URL + "/"} element={<Layout />}>
                   <Route index element={<RootProjectSelectionPage />} />
-                  <Route path="/p/:projectName/*" element={<NoProjectGuard />}>
+                  <Route path={BASE_URL + "/p/:projectName/*"} element={<NoProjectGuard />}>
                     <Route index element={<ProjectOverviewPage />} />
                     <Route path="data-source/" element={<DatasourceIndex />} />
                     <Route

diff --git a/ui/src/components/FeaturesInServiceDisplay.tsx b/ui/src/components/FeaturesInServiceDisplay.tsx
@@ -29,8 +29,8 @@ const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/feature-view/${name}`}
-            to={`/p/${projectName}/feature-view/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/components/FeaturesListDisplay.tsx b/ui/src/components/FeaturesListDisplay.tsx
@@ -21,8 +21,8 @@ const FeaturesList = ({
       field: "name",
       render: (item: string) => (
         <EuiCustomLink
-          href={`/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
-          to={`/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
+          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
+          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
         >
           {item}
         </EuiCustomLink>

diff --git a/ui/src/components/ObjectsCountStats.tsx b/ui/src/components/ObjectsCountStats.tsx
@@ -55,7 +55,7 @@ const ObjectsCountStats = () => {
             <EuiFlexItem>
               <EuiStat
                 style={statStyle}
-                onClick={() => navigate(`/p/${projectName}/feature-service`)}
+                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service`)}
                 description="Feature Services→"
                 title={data.featureServices}
                 reverse
@@ -65,7 +65,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Feature Views→"
-                onClick={() => navigate(`/p/${projectName}/feature-view`)}
+                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view`)}
                 title={data.featureViews}
                 reverse
               />
@@ -74,7 +74,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Entities→"
-                onClick={() => navigate(`/p/${projectName}/entity`)}
+                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity`)}
                 title={data.entities}
                 reverse
               />
@@ -83,7 +83,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Data Sources→"
-                onClick={() => navigate(`/p/${projectName}/data-source`)}
+                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source`)}
                 title={data.dataSources}
                 reverse
               />

diff --git a/ui/src/components/ProjectSelector.tsx b/ui/src/components/ProjectSelector.tsx
@@ -22,7 +22,7 @@ const ProjectSelector = () => {
 
   const basicSelectId = useGeneratedHtmlId({ prefix: "basicSelect" });
   const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    navigate(`/p/${e.target.value}`);
+    navigate(`${process.env.PUBLIC_URL || ""}/p/${e.target.value}`);
   };
 
   return (

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -97,6 +97,13 @@ ReactDOM.render(
       reactQueryClient={queryClient}
       feastUIConfigs={{
         tabsRegistry: tabsRegistry,
+        projectListPromise: fetch(process.env.PUBLIC_URL || "" + "/projects-list.json", {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }).then((res) => {
+            return res.json();
+          })
       }}
     />
   </React.StrictMode>,

diff --git a/ui/src/pages/RootProjectSelectionPage.tsx b/ui/src/pages/RootProjectSelectionPage.tsx
@@ -22,12 +22,12 @@ const RootProjectSelectionPage = () => {
   useEffect(() => {
     if (data && data.default) {
       // If a default is set, redirect there.
-      navigate(`/p/${data.default}`);
+      navigate(`${process.env.PUBLIC_URL || ""}/p/${data.default}`);
     }
 
     if (data && data.projects.length === 1) {
       // If there is only one project, redirect there.
-      navigate(`/p/${data.projects[0].id}`);
+      navigate(`${process.env.PUBLIC_URL || ""}/p/${data.projects[0].id}`);
     }
   }, [data, navigate]);
 
@@ -39,7 +39,7 @@ const RootProjectSelectionPage = () => {
           title={`${item.name}`}
           description={item?.description || ""}
           onClick={() => {
-            navigate(`/p/${item.id}`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${item.id}`);
           }}
         />
       </EuiFlexItem>

diff --git a/ui/src/pages/Sidebar.tsx b/ui/src/pages/Sidebar.tsx
@@ -60,15 +60,15 @@ const SideNav = () => {
       name: "Home",
       id: htmlIdGenerator("basicExample")(),
       onClick: () => {
-        navigate(`/p/${projectName}/`);
+        navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/`);
       },
       items: [
         {
           name: dataSourcesLabel,
           id: htmlIdGenerator("dataSources")(),
           icon: <EuiIcon type={DataSourceIcon16} />,
           onClick: () => {
-            navigate(`/p/${projectName}/data-source`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source`);
           },
           isSelected: useMatchSubpath("data-source"),
         },
@@ -77,7 +77,7 @@ const SideNav = () => {
           id: htmlIdGenerator("entities")(),
           icon: <EuiIcon type={EntityIcon16} />,
           onClick: () => {
-            navigate(`/p/${projectName}/entity`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity`);
           },
           isSelected: useMatchSubpath("entity"),
         },
@@ -86,7 +86,7 @@ const SideNav = () => {
           id: htmlIdGenerator("featureView")(),
           icon: <EuiIcon type={FeatureViewIcon16} />,
           onClick: () => {
-            navigate(`/p/${projectName}/feature-view`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view`);
           },
           isSelected: useMatchSubpath("feature-view"),
         },
@@ -95,7 +95,7 @@ const SideNav = () => {
           id: htmlIdGenerator("featureService")(),
           icon: <EuiIcon type={FeatureServiceIcon16} />,
           onClick: () => {
-            navigate(`/p/${projectName}/feature-service`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service`);
           },
           isSelected: useMatchSubpath("feature-service"),
         },
@@ -104,7 +104,7 @@ const SideNav = () => {
           id: htmlIdGenerator("savedDatasets")(),
           icon: <EuiIcon type={DatasetIcon16} />,
           onClick: () => {
-            navigate(`/p/${projectName}/data-set`);
+            navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set`);
           },
           isSelected: useMatchSubpath("data-set"),
         },

diff --git a/ui/src/pages/data-sources/DataSourcesListingTable.tsx b/ui/src/pages/data-sources/DataSourcesListingTable.tsx
@@ -21,8 +21,8 @@ const DatasourcesListingTable = ({
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/data-source/${name}`}
-            to={`/p/${projectName}/data-source/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/pages/entities/EntitiesListingTable.tsx b/ui/src/pages/entities/EntitiesListingTable.tsx
@@ -21,8 +21,8 @@ const EntitiesListingTable = ({ entities }: EntitiesListingTableProps) => {
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/entity/${name}`}
-            to={`/p/${projectName}/entity/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/pages/entities/FeatureViewEdgesList.tsx b/ui/src/pages/entities/FeatureViewEdgesList.tsx
@@ -54,8 +54,8 @@ const FeatureViewEdgesList = ({ fvNames }: FeatureViewEdgesListInterace) => {
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/feature-view/${name}`}
-            to={`/p/${projectName}/feature-view/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/pages/feature-services/FeatureServiceListingTable.tsx b/ui/src/pages/feature-services/FeatureServiceListingTable.tsx
@@ -31,8 +31,8 @@ const FeatureServiceListingTable = ({
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/feature-service/${name}`}
-            to={`/p/${projectName}/feature-service/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx b/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx
@@ -109,7 +109,7 @@ const FeatureServiceOverviewTab = () => {
                     tags={data.spec.tags}
                     createLink={(key, value) => {
                       return (
-                        `/p/${projectName}/feature-service?` +
+                        `${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service?` +
                         encodeSearchQueryString(`${key}:${value}`)
                       );
                     }}
@@ -133,7 +133,7 @@ const FeatureServiceOverviewTab = () => {
                             color="primary"
                             onClick={() => {
                               navigate(
-                                `/p/${projectName}/entity/${entity.name}`
+                                `${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${entity.name}`
                               );
                             }}
                             onClickAriaLabel={entity.name}

diff --git a/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx b/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx
@@ -19,8 +19,8 @@ const ConsumingFeatureServicesList = ({
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/feature-service/${name}`}
-            to={`/p/${projectName}/feature-service/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
           >
             {name}
           </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/FeatureViewListingTable.tsx b/ui/src/pages/feature-views/FeatureViewListingTable.tsx
@@ -32,8 +32,8 @@ const FeatureViewListingTable = ({
       render: (name: string, item: genericFVType) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/feature-view/${name}`}
-            to={`/p/${projectName}/feature-view/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
           >
             {name} {(item.type === "ondemand" && <EuiBadge>ondemand</EuiBadge>) || (item.type === "stream" && <EuiBadge>stream</EuiBadge>)}
           </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/RegularFeatureViewOverviewTab.tsx b/ui/src/pages/feature-views/RegularFeatureViewOverviewTab.tsx
@@ -96,7 +96,7 @@ const RegularFeatureViewOverviewTab = ({
                       <EuiBadge
                         color="primary"
                         onClick={() => {
-                          navigate(`/p/${projectName}/entity/${entity}`);
+                          navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${entity}`);
                         }}
                         onClickAriaLabel={entity}
                         data-test-sub="testExample1"
@@ -134,7 +134,7 @@ const RegularFeatureViewOverviewTab = ({
                 tags={data.spec.tags}
                 createLink={(key, value) => {
                   return (
-                    `/p/${projectName}/feature-view?` +
+                    `${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view?` +
                     encodeSearchQueryString(`${key}:${value}`)
                   );
                 }}

diff --git a/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx b/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx
@@ -96,8 +96,8 @@ const StreamFeatureViewOverviewTab = ({
                     </EuiText>
                     <EuiTitle size="s">
                       <EuiCustomLink
-                        href={`/p/${projectName}/data-source/${inputGroup?.name}`}
-                        to={`/p/${projectName}/data-source/${inputGroup?.name}`}
+                        href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${inputGroup?.name}`}
+                        to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${inputGroup?.name}`}
                       >
                         {inputGroup?.name}
                       </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx
@@ -31,8 +31,8 @@ const FeatureViewProjectionDisplayPanel = (featureViewProjection: RequestDataDis
       </EuiText>
       <EuiTitle size="s">
         <EuiCustomLink
-          href={`/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
-          to={`/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
+          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
+          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
         >
           {featureViewProjection?.featureViewName}
         </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx b/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx
@@ -38,8 +38,8 @@ const RequestDataDisplayPanel = ({
       </EuiText>
       <EuiTitle size="s">
         <EuiCustomLink
-          href={`/p/${projectName}/data-source/${requestDataSource?.name}`}
-          to={`/p/${projectName}/data-source/${requestDataSource?.name}`}
+          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${requestDataSource?.name}`}
+          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${requestDataSource?.name}`}
         >
           {requestDataSource?.name}
         </EuiCustomLink>

diff --git a/ui/src/pages/features/FeatureOverviewTab.tsx b/ui/src/pages/features/FeatureOverviewTab.tsx
@@ -63,8 +63,8 @@ const FeatureOverviewTab = () => {
                   <EuiDescriptionListTitle>FeatureView</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
                     <EuiCustomLink
-                      href={`/p/${projectName}/feature-view/${FeatureViewName}`}
-                      to={`/p/${projectName}/feature-view/${FeatureViewName}`}>
+                      href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${FeatureViewName}`}
+                      to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${FeatureViewName}`}>
                       {FeatureViewName}
                     </EuiCustomLink>
                   </EuiDescriptionListDescription>

diff --git a/ui/src/pages/saved-data-sets/DatasetsListingTable.tsx b/ui/src/pages/saved-data-sets/DatasetsListingTable.tsx
@@ -20,8 +20,8 @@ const DatasetsListingTable = ({ datasets }: DatasetsListingTableProps) => {
       render: (name: string) => {
         return (
           <EuiCustomLink
-            href={`/p/${projectName}/data-set/${name}`}
-            to={`/p/${projectName}/data-set/${name}`}
+            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set/${name}`}
+            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set/${name}`}
           >
             {name}
           </EuiCustomLink>