fix: Fix issue when user specifies a port for feast ui (#2692)

* fix: Fix issue when user specifies a port for feast ui

Signed-off-by: Danny Chiao <[email protected]>

* fx

Signed-off-by: Danny Chiao <[email protected]>

* fix python 3.9 version of importlib

Signed-off-by: Danny Chiao <[email protected]>

* revert to pkg_resources

Signed-off-by: Danny Chiao <[email protected]>

Author: adchia

sdk/python/feast/ui/README.md

@@ -1,6 +1,6 @@
 # Example Feast UI App
 
-This is an example React App that imports the Feast UI module and relies on a "/projects-list" endpoint to get projects.
+This is an example React App that imports the Feast UI module. 
 
 See the module import in `src/index.js`. The main change this implements on top of a vanilla create-react-app is adding:
 
@@ -11,23 +11,15 @@ import "@feast-dev/feast-ui/dist/feast-ui.css";
 
 ReactDOM.render(
   <React.StrictMode>
-    <FeastUI
-      feastUIConfigs={{
-        projectListPromise: fetch("http://0.0.0.0:8888/projects-list", {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((res) => {
-          return res.json();
-        })
-      }}
-    />
+    <FeastUI />
   </React.StrictMode>,
   document.getElementById("root")
 );
 ```
 
-It is used by the `feast ui` command to scaffold a local UI server. The feast python package bundles in resources produced from `npm run build --omit=dev
+It is used by the `feast ui` command to scaffold a local UI server. The feast python package bundles in resources produced from `npm run build --omit=dev.` 
+
+The `feast ui` command will generate the necessary `projects-list.json` file and initialize it for the UI to read.
 
 
 **Note**: yarn start will not work on this because of the above dependency.

sdk/python/feast/ui/public/projects-list.json

@@ -0,0 +1,11 @@
+{
+    "projects": [
+      {
+        "name": "Project",
+        "description": "Test project",
+        "id": "project_id",
+        "registryPath": "http://0.0.0.0:8888/registry"
+      }
+    ]
+  }
+  

sdk/python/feast/ui/src/index.tsx

@@ -1,22 +1,12 @@
-import React from 'react';
+import React from "react";
 import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
 import FeastUI from "@feast-dev/feast-ui";
 import "@feast-dev/feast-ui/dist/feast-ui.css";
 
 ReactDOM.render(
   <React.StrictMode>
-    <FeastUI
-      feastUIConfigs={{
-        projectListPromise: fetch("http://0.0.0.0:8888/projects-list", {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((res) => {
-          return res.json();
-        })
-      }}
-    />
+    <FeastUI />
   </React.StrictMode>,
   document.getElementById("root")
-);
+);

sdk/python/feast/ui_server.py

@@ -16,9 +16,9 @@ def get_app(
     get_registry_dump: Callable,
     project_id: str,
     registry_ttl_secs: int,
+    host: str,
+    port: int,
 ):
-    ui_dir = pkg_resources.resource_filename(__name__, "ui/build/")
-
     app = FastAPI()
 
     app.add_middleware(
@@ -53,25 +53,24 @@ def shutdown_event():
 
     async_refresh()
 
-    @app.get("/registry")
-    def read_registry():
-        return json.loads(registry_json)
-
-    # Generate projects-list json that points to the current repo's project
-    # TODO(adchia): Enable users to also add project name + description fields in feature_store.yaml
-    @app.get("/projects-list")
-    def projects_list():
-        projects = {
+    ui_dir = pkg_resources.resource_filename(__name__, "ui/build/")
+    # Initialize with the projects-list.json file
+    with open(ui_dir + "projects-list.json", mode="w") as f:
+        projects_dict = {
             "projects": [
                 {
                     "name": "Project",
                     "description": "Test project",
                     "id": project_id,
-                    "registryPath": "http://0.0.0.0:8888/registry",
+                    "registryPath": f"http://{host}:{port}/registry",
                 }
             ]
         }
-        return projects
+        f.write(json.dumps(projects_dict))
+
+    @app.get("/registry")
+    def read_registry():
+        return json.loads(registry_json)
 
     # For all other paths (such as paths that would otherwise be handled by react router), pass to React
     @app.api_route("/p/{path_name:path}", methods=["GET"])
@@ -98,5 +97,5 @@ def start_server(
     project_id: str,
     registry_ttl_sec: int,
 ):
-    app = get_app(store, get_registry_dump, project_id, registry_ttl_sec)
+    app = get_app(store, get_registry_dump, project_id, registry_ttl_sec, host, port)
     uvicorn.run(app, host=host, port=port)