From 49322739e7887395ee87bd241dd4e52929ed07e1 Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Tue, 23 Aug 2022 00:29:56 +0800 Subject: [PATCH 1/3] Add home page and project list page --- ui/src/app.tsx | 5 + ui/src/components/featureList.tsx | 18 ++ ui/src/components/header/header.tsx | 12 +- ui/src/components/projectList.tsx | 80 +++++++ ui/src/components/sidemenu/siteMenu.tsx | 18 +- ui/src/models/model.ts | 4 + ui/src/pages/feature/features.tsx | 21 +- ui/src/pages/home/home.tsx | 264 ++++++++++++++++++++++++ ui/src/pages/project/projects.tsx | 18 ++ 9 files changed, 408 insertions(+), 32 deletions(-) create mode 100644 ui/src/components/projectList.tsx create mode 100644 ui/src/pages/home/home.tsx create mode 100644 ui/src/pages/project/projects.tsx 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 000d18815..2c769215f 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"; @@ -210,6 +211,9 @@ const FeatureList = () => { 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..73b08a1ca --- /dev/null +++ b/ui/src/components/projectList.tsx @@ -0,0 +1,80 @@ +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"); - }; - return (
Features - - -
diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx new file mode 100644 index 000000000..ccb1e9459 --- /dev/null +++ b/ui/src/pages/home/home.tsx @@ -0,0 +1,264 @@ +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/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; From fe91d6dcfe169ab4773fae7c210ffe9936416297 Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Tue, 23 Aug 2022 13:34:24 +0800 Subject: [PATCH 2/3] Fix responsive issue --- ui/src/components/featureList.tsx | 1 - ui/src/pages/feature/featureDetails.tsx | 2 -- ui/src/pages/home/home.tsx | 26 ++++++++++--------- ui/src/pages/jobs/jobs.tsx | 2 +- ui/src/pages/management/management.tsx | 2 +- .../pages/responseErrors/responseErrors.tsx | 4 +-- ui/src/site.css | 1 - 7 files changed, 18 insertions(+), 20 deletions(-) diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx index 2c769215f..1f9ca7391 100644 --- a/ui/src/components/featureList.tsx +++ b/ui/src/components/featureList.tsx @@ -250,7 +250,6 @@ const FeatureList = () => { > Search - - - Recent Activity - Under construction - + + + + Recent Activity + Under construction + + + 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/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; } From e98d14ed39688a38a82b1386f07142244b2dfccf Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Tue, 23 Aug 2022 14:47:56 +0800 Subject: [PATCH 3/3] Add a view feature action link in project list page --- ui/src/components/projectList.tsx | 26 +++-- ui/src/pages/home/home.tsx | 179 ++++++++++++++---------------- 2 files changed, 103 insertions(+), 102 deletions(-) diff --git a/ui/src/components/projectList.tsx b/ui/src/components/projectList.tsx index 73b08a1ca..904b2b344 100644 --- a/ui/src/components/projectList.tsx +++ b/ui/src/components/projectList.tsx @@ -29,14 +29,24 @@ const ProjectList = () => { width: 120, render: (row: Project) => { return ( - + <> + + + ); }, onCell: () => { diff --git a/ui/src/pages/home/home.tsx b/ui/src/pages/home/home.tsx index 9686ce0be..f23b790cf 100644 --- a/ui/src/pages/home/home.tsx +++ b/ui/src/pages/home/home.tsx @@ -160,103 +160,94 @@ const Home = () => {
- - - + Need help to get started? + Explore the following resources to get started with Feathr: + +

+ Visit + - Need help to get started? - Explore the following resources to get started with Feathr: -

-

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

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

+ - - - - Recent Activity - Under construction - - - + + Recent Activity + Under construction +