diff --git a/ui/src/app.tsx b/ui/src/app.tsx index 5e0a9a927..be6452636 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -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 = () => {
+ } /> + } /> + } /> } /> } /> } /> diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx index 511fc48ba..e5f0d9957 100644 --- a/ui/src/components/featureList.tsx +++ b/ui/src/components/featureList.tsx @@ -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 (
{ > Search + + + { className="layout-header" style={{ backgroundColor: "#fff", height: "auto" }} > - - In Feathr Feature Store, you can manage and share features. - - {" "} - Learn More - - + diff --git a/ui/src/components/projectList.tsx b/ui/src/components/projectList.tsx new file mode 100644 index 000000000..904b2b344 --- /dev/null +++ b/ui/src/components/projectList.tsx @@ -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:
Name
, + key: "name", + align: "center" as "center", + width: 120, + render: (row: Project) => { + return row.name; + }, + onCell: () => { + return { + style: { + maxWidth: 400, + }, + }; + }, + }, + { + title:
Action
, + key: "name", + width: 120, + render: (row: Project) => { + return ( + <> + + + + ); + }, + onCell: () => { + return { + style: { + maxWidth: 120, + }, + }; + }, + }, + ]; + const [page, setPage] = useState(1); + const [loading, setLoading] = useState(false); + const [tableData, setTableData] = useState(); + + 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 ( +
+
+ + ); +}; + +export default ProjectList; diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx index a28159968..0ea68fd6e 100644 --- a/ui/src/components/sidemenu/siteMenu.tsx +++ b/ui/src/components/sidemenu/siteMenu.tsx @@ -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={["/"]} > + } + > + Home + + + } + > + Projects + { - 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 = () => {
Features - - -
diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx new file mode 100644 index 000000000..f23b790cf --- /dev/null +++ b/ui/src/pages/home/home.tsx @@ -0,0 +1,257 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Card, Col, Row, Typography } from "antd"; +import { + CopyOutlined, + DatabaseOutlined, + EyeOutlined, + ProjectOutlined, +} from "@ant-design/icons"; + +const { Title } = Typography; + +const Home = () => { + return ( +
+ + Welcome to Feathr Feature Store + + You can use Feathr UI to search features, identify data sources, track + feature lineages and manage access controls. + + {" "} + Learn More + + + + +
+ + + + + + + + + Projects + + + + + + See all + + + + + + + + + + + + + + + + + Sources + + + + + + See all + + + + + + + + + + + + + + + + + Features + + + + + + See all + + + + + + + + + + + + + + + + + Monitoring + + + + + + See all + + + + + + + + + + + + Need help to get started? + Explore the following resources to get started with Feathr: + +

+ Visit + + {" "} + Feathr Github Homepage + {" "} + to learn more. +

+ + + + + Recent Activity + Under construction + + + + + ); +}; + +export default Home; diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx index 705d71951..a292ca30f 100644 --- a/ui/src/pages/jobs/jobs.tsx +++ b/ui/src/pages/jobs/jobs.tsx @@ -6,7 +6,7 @@ const { Title } = Typography; const Jobs = () => { return (
- + Jobs Under construction diff --git a/ui/src/pages/management/management.tsx b/ui/src/pages/management/management.tsx index bfd7e2f0e..7ceb33dae 100644 --- a/ui/src/pages/management/management.tsx +++ b/ui/src/pages/management/management.tsx @@ -7,7 +7,7 @@ const { Title } = Typography; const Management = () => { return (
- + Role Management diff --git a/ui/src/pages/project/projects.tsx b/ui/src/pages/project/projects.tsx new file mode 100644 index 000000000..03cbf3d48 --- /dev/null +++ b/ui/src/pages/project/projects.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Card, Typography } from "antd"; +import ProjectList from "../../components/projectList"; + +const { Title } = Typography; + +const Projects = () => { + return ( +
+ + Projects + + +
+ ); +}; + +export default Projects; diff --git a/ui/src/pages/responseErrors/responseErrors.tsx b/ui/src/pages/responseErrors/responseErrors.tsx index 5373c7691..703b184be 100644 --- a/ui/src/pages/responseErrors/responseErrors.tsx +++ b/ui/src/pages/responseErrors/responseErrors.tsx @@ -9,7 +9,7 @@ const ResponseErrors = () => { case "403": return (
- + ERROR 403 ACCESS NOT GRANTED {detail} @@ -20,7 +20,7 @@ const ResponseErrors = () => { default: return (
- + Unknown Error
diff --git a/ui/src/site.css b/ui/src/site.css index 536dd8656..be060dc20 100644 --- a/ui/src/site.css +++ b/ui/src/site.css @@ -5,7 +5,6 @@ .card { margin-top: 15px; margin-right: 15px; - min-width: 1000px; box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6); border-radius: 8px; }