feathr-ai · xiaoyongzhu · Aug 24, 2022 · Aug 22, 2022 · Aug 23, 2022 · Aug 23, 2022
@@ -16,6 +16,8 @@ import LineageGraph from "./pages/feature/lineageGraph";
 import Management from "./pages/management/management";
 import ResponseErrors from "./pages/responseErrors/responseErrors";
 import RoleManagement from "./pages/management/roleManagement";
+import Home from "./pages/home/home";
+import Projects from "./pages/project/projects";
 import { getMsalConfig } from "./utils/utils";
 
 const queryClient = new QueryClient();
@@ -32,6 +34,9 @@ const App = () => {
               <Layout>
                 <Header />
                 <Routes>
+                  <Route index element={<Home />} />
+                  <Route path="/home" element={<Home />} />
+                  <Route path="/projects" element={<Projects />} />
                   <Route path="/dataSources" element={<DataSources />} />
                   <Route path="/features" element={<Features />} />
                   <Route path="/new-feature" element={<NewFeature />} />

@@ -10,6 +10,7 @@ import {
   Tooltip,
   Form,
   Table,
+  Space,
 } from "antd";
 import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
@@ -226,6 +227,9 @@ const FeatureList = ({ projectProp, keywordProp }: Props) => {
     fetchData(project);
   };
 
+  const onCreateFeatureClick = () => {
+    navigate("/new-feature");
+  };
   return (
     <div>
       <Form.Item
@@ -263,6 +267,19 @@ const FeatureList = ({ projectProp, keywordProp }: Props) => {
       >
         Search
       </Button>
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          onClick={onCreateFeatureClick}
+          style={{
+            position: "absolute",
+            right: "12px",
+            top: "56px",
+          }}
+        >
+          + Create Feature
+        </Button>
+      </Space>
       <Table
         dataSource={tableData}
         columns={columns}

@@ -12,17 +12,7 @@ const Header = () => {
       className="layout-header"
       style={{ backgroundColor: "#fff", height: "auto" }}
     >
-      <span>
-        In Feathr Feature Store, you can manage and share features.
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://linkedin.github.io/feathr/concepts/feathr-concepts-for-beginners.html"
-        >
-          {" "}
-          Learn More
-        </a>
-      </span>
+      <span></span>
       <span className="layout-header-right">
         <HeaderWidget username={account?.username} />
       </span>

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Table } from "antd";
+import { Project } from "../models/model";
+import { fetchProjects } from "../api";
+
+const ProjectList = () => {
+  const navigate = useNavigate();
+  const columns = [
+    {
+      title: <div style={{ userSelect: "none" }}>Name</div>,
+      key: "name",
+      align: "center" as "center",
+      width: 120,
+      render: (row: Project) => {
+        return row.name;
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 400,
+          },
+        };
+      },
+    },
+    {
+      title: <div>Action</div>,
+      key: "name",
+      width: 120,
+      render: (row: Project) => {
+        return (
+          <>
+            <Button
+              type="link"
+              onClick={() => {
+                navigate(`/features?project=${row.name}`);
+              }}
+            >
+              View Features
+            </Button>
+            <Button
+              type="link"
+              onClick={() => {
+                navigate(`/projects/${row.name}/lineage`);
+              }}
+            >
+              View Lineage
+            </Button>
+          </>
+        );
+      },
+      onCell: () => {
+        return {
+          style: {
+            maxWidth: 120,
+          },
+        };
+      },
+    },
+  ];
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [tableData, setTableData] = useState<Project[]>();
+
+  const loadProjects = useCallback(async () => {
+    setLoading(true);
+    const result = await fetchProjects();
+    const projects = result.map((p) => ({ name: p } as Project));
+    setPage(page);
+    setTableData(projects);
+    setLoading(false);
+  }, [page]);
+
+  useEffect(() => {
+    loadProjects();
+  }, [loadProjects]);
+
+  return (
+    <div>
+      <Table
+        dataSource={tableData}
+        columns={columns}
+        rowKey={"id"}
+        loading={loading}
+      />
+    </div>
+  );
+};
+
+export default ProjectList;
@@ -1,10 +1,12 @@
 import { Layout, Menu, Typography } from "antd";
 import {
+  ControlOutlined,
   CopyOutlined,
   DatabaseOutlined,
   EyeOutlined,
+  HomeOutlined,
+  ProjectOutlined,
   RocketOutlined,
-  ControlOutlined,
 } from "@ant-design/icons";
 import { Link } from "react-router-dom";
 
@@ -36,6 +38,20 @@ const SideMenu = () => {
         defaultSelectedKeys={["/"]}
         defaultOpenKeys={["/"]}
       >
+        <Menu.Item
+          key="/home"
+          icon={<HomeOutlined style={{ fontSize: "20px", color: "#e28743" }} />}
+        >
+          <Link to="/home">Home</Link>
+        </Menu.Item>
+        <Menu.Item
+          key="/projects"
+          icon={
+            <ProjectOutlined style={{ fontSize: "20px", color: "#177ddc" }} />
+          }
+        >
+          <Link to="/projects">Projects</Link>
+        </Menu.Item>
         <Menu.Item
           key="/dataSources"
           icon={

@@ -1,3 +1,7 @@
+export interface Project {
+  name: string;
+}
+
 export interface Feature {
   attributes: FeatureAttributes;
   displayText: string;

@@ -107,7 +107,6 @@ const InputAnchorFeatures = ({
             style={{
               marginTop: "15px",
               marginRight: "15px",
-              minWidth: "1000px",
               boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
               borderRadius: "8px",
             }}
@@ -147,7 +146,6 @@ const InputDerivedFeatures = ({
             style={{
               marginTop: "15px",
               marginRight: "15px",
-              minWidth: "1000px",
               boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
               borderRadius: "8px",
             }}

@@ -5,10 +5,6 @@ import FeatureList from "../../components/featureList";
 const { Title } = Typography;
 
 const Features = () => {
-  const navigate = useNavigate();
-  const onCreateFeatureClick = () => {
-    navigate("/new-feature");
-  };
   const [searchParams] = useSearchParams();
   const project = (searchParams.get("project") as string) ?? "";
   const keyword = (searchParams.get("keyword") as string) ?? "";
@@ -17,19 +13,6 @@ const Features = () => {
     <div className="page">
       <Card>
         <Title level={3}>Features</Title>
-        <Space style={{ marginBottom: 16 }}>
-          <Button
-            type="primary"
-            onClick={onCreateFeatureClick}
-            style={{
-              position: "absolute",
-              right: "12px",
-              top: "56px",
-            }}
-          >
-            + Create Feature
-          </Button>
-        </Space>
         <FeatureList projectProp={project} keywordProp={keyword} />
       </Card>
     </div>