From d004e3b3c1212fbf287410e63a49acedb66196ef Mon Sep 17 00:00:00 2001 From: Enya Date: Fri, 29 Jul 2022 12:21:08 +0800 Subject: [PATCH 1/4] add management menu bar --- ui/.env | 1 + ui/src/components/sidemenu/siteMenu.tsx | 15 +++++++++++++++ ui/src/react-app-env.d.ts | 1 + 3 files changed, 17 insertions(+) diff --git a/ui/.env b/ui/.env index 33b8c8ce4..0105a1136 100644 --- a/ui/.env +++ b/ui/.env @@ -1,3 +1,4 @@ REACT_APP_AZURE_CLIENT_ID=db8dc4b0-202e-450c-b38d-7396ad9631a5 REACT_APP_AZURE_TENANT_ID=common REACT_APP_API_ENDPOINT=https://feathr-sql-registry.azurewebsites.net +REACT_APP_ENABLE_RBAC=false diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx index defa334cb..fb258403a 100644 --- a/ui/src/components/sidemenu/siteMenu.tsx +++ b/ui/src/components/sidemenu/siteMenu.tsx @@ -4,6 +4,7 @@ import { DatabaseOutlined, EyeOutlined, RocketOutlined, + ControlOutlined, } from "@ant-design/icons"; import { Link } from "react-router-dom"; @@ -11,6 +12,8 @@ const { Title } = Typography; const { Sider } = Layout; const SideMenu = () => { + const showManagement = process.env.REACT_APP_ENABLE_RBAC; + return ( { > <Link to="/monitoring">Monitoring</Link> </Menu.Item> + {showManagement === "true" ? ( + <Menu.Item + key="/management" + icon={ + <ControlOutlined style={{ fontSize: "20px", color: "#6495ed" }} /> + } + > + <Link to="/management">Management</Link> + </Menu.Item> + ) : ( + "" + )} </Menu> </Sider> ); diff --git a/ui/src/react-app-env.d.ts b/ui/src/react-app-env.d.ts index 6d07e47bf..6cb4d470c 100644 --- a/ui/src/react-app-env.d.ts +++ b/ui/src/react-app-env.d.ts @@ -8,6 +8,7 @@ declare global { REACT_APP_AZURE_CLIENT_ID: string; REACT_APP_AZURE_TENANT_ID: string; REACT_APP_API_ENDPOINT: string; + REACR_APP_ENABLE_RBAC: boolean; } } From 62328f563292399b3e57e2e9d91e7605a5206ea4 Mon Sep 17 00:00:00 2001 From: Enya-Yx <enya@Enyas-MacBook-Pro.local> Date: Tue, 2 Aug 2022 17:11:56 +0800 Subject: [PATCH 2/4] Add 'enableRBAC' flag in window environment config and adjust management page --- deploy/start.sh | 6 ++++ .../azure_resource_provision.json | 4 +-- ui/.env | 2 +- ui/src/components/sidemenu/siteMenu.tsx | 8 ++--- ui/src/components/userRoles.tsx | 32 +++++++------------ ui/src/pages/management/management.tsx | 2 +- ui/src/react-app-env.d.ts | 1 + 7 files changed, 26 insertions(+), 29 deletions(-) mode change 100644 => 100755 deploy/start.sh diff --git a/deploy/start.sh b/deploy/start.sh old mode 100644 new mode 100755 index 946384461..f59b5bc7a --- a/deploy/start.sh +++ b/deploy/start.sh @@ -16,6 +16,12 @@ else echo " \"azureTenantId\": \"${REACT_APP_AZURE_TENANT_ID}\"," >> $envfile fi +if [[ -z "${REACT_APP_ENABLE_RBAC}" ]]; then + echo "Environment variable REACT_APP_ENABLE_RBAC is not defined, skipping" +else + echo " \"enableRBAC\": \"${REACT_APP_ENABLE_RBAC}\"," >> $envfile +fi + echo "}" >> $envfile echo "Successfully generated ${envfile} with following content" diff --git a/docs/how-to-guides/azure_resource_provision.json b/docs/how-to-guides/azure_resource_provision.json index d6799493a..39d269000 100644 --- a/docs/how-to-guides/azure_resource_provision.json +++ b/docs/how-to-guides/azure_resource_provision.json @@ -398,7 +398,7 @@ "value": "[concat('Server=tcp:',reference(variables('sqlServerName')).fullyQualifiedDomainName,',1433;Initial Catalog=',variables('sqlDatabaseName'),';Persist Security Info=False;User ID=',reference(variables('sqlserverName')).administratorLogin,';Password=',parameters('sqlAdminPassword'),';MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;')]" }, { - "name": "ENABLE_RBAC", + "name": "REACT_APP_ENABLE_RBAC", "value": "[if(equals(parameters('enableRBAC'),'Yes'),json('true'),json('null'))]" }, { @@ -538,4 +538,4 @@ } ], "outputs": {} - } \ No newline at end of file + } diff --git a/ui/.env b/ui/.env index 0105a1136..42f7420fa 100644 --- a/ui/.env +++ b/ui/.env @@ -1,4 +1,4 @@ REACT_APP_AZURE_CLIENT_ID=db8dc4b0-202e-450c-b38d-7396ad9631a5 REACT_APP_AZURE_TENANT_ID=common -REACT_APP_API_ENDPOINT=https://feathr-sql-registry.azurewebsites.net +REACT_APP_API_ENDPOINT=https://feathr-rbac-registry.azurewebsites.net REACT_APP_ENABLE_RBAC=false diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx index fb258403a..37c9af920 100644 --- a/ui/src/components/sidemenu/siteMenu.tsx +++ b/ui/src/components/sidemenu/siteMenu.tsx @@ -12,7 +12,9 @@ const { Title } = Typography; const { Sider } = Layout; const SideMenu = () => { - const showManagement = process.env.REACT_APP_ENABLE_RBAC; + const showManagement = + window.environment?.enableRbac ?? + process.env.REACT_APP_ENABLE_RBAC === "true"; return ( <Sider theme="dark"> @@ -61,7 +63,7 @@ const SideMenu = () => { > <Link to="/monitoring">Monitoring</Link> </Menu.Item> - {showManagement === "true" ? ( + {showManagement && ( <Menu.Item key="/management" icon={ @@ -70,8 +72,6 @@ const SideMenu = () => { > <Link to="/management">Management</Link> </Menu.Item> - ) : ( - "" )} </Menu> </Sider> diff --git a/ui/src/components/userRoles.tsx b/ui/src/components/userRoles.tsx index 60dfeb668..470838178 100644 --- a/ui/src/components/userRoles.tsx +++ b/ui/src/components/userRoles.tsx @@ -132,31 +132,21 @@ const UserRoles: React.FC = () => { return ( <div> - <PageHeader - title={`Role Managements`} - style={{ - backgroundColor: "white", - paddingLeft: "50px", - paddingRight: "50px", - }} - > - <Row> - <div style={{ flex: 1 }}> - <> - <p> - This page is protected by Feathr Access Control. Only Global - Admin can retrieve management details and grant or delete user - roles. - </p> - </> - </div> - </Row> - </PageHeader> + <Row> + <div style={{ flex: 1 }}> + <> + <p style={{ width: "80%" }}> + This page is protected by Feathr Access Control. Only Global Admin + can retrieve management details and grant or delete user roles. + </p> + </> + </div> + </Row> <Space style={{ marginBottom: 16 }}> <Button type="primary" onClick={onClickRoleAssign} - style={{ position: "absolute", right: "12px", top: "56px" }} + style={{ position: "absolute", right: "12px", top: "70px" }} > + Create Role Assignment </Button> diff --git a/ui/src/pages/management/management.tsx b/ui/src/pages/management/management.tsx index 09909b5a1..08bbab198 100644 --- a/ui/src/pages/management/management.tsx +++ b/ui/src/pages/management/management.tsx @@ -8,7 +8,7 @@ const Management: React.FC = () => { return ( <div className="page"> <Card style={{ minWidth: "1000px" }}> - <Title level={3}>Management + Role Management diff --git a/ui/src/react-app-env.d.ts b/ui/src/react-app-env.d.ts index 6cb4d470c..d1bd559de 100644 --- a/ui/src/react-app-env.d.ts +++ b/ui/src/react-app-env.d.ts @@ -19,6 +19,7 @@ declare global { interface EnvironmentConfig { azureClientId: string; azureTenantId: string; + enableRbac: boolean; } } From 34bca18e690be7d515a60d9d95ce00c09e5deb07 Mon Sep 17 00:00:00 2001 From: Enya-Yx Date: Wed, 3 Aug 2022 13:21:48 +0800 Subject: [PATCH 3/4] fix errors and update docs --- deploy/start.sh | 2 +- ...d-and-push-feathr-registry-docker-image.md | 2 +- ui/.env | 2 +- ui/src/components/projectFeatureList.tsx | 33 +++++++++++++++++++ ui/src/components/sidemenu/siteMenu.tsx | 9 ++--- ui/src/react-app-env.d.ts | 2 +- 6 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 ui/src/components/projectFeatureList.tsx diff --git a/deploy/start.sh b/deploy/start.sh index f59b5bc7a..e8bd1eea5 100755 --- a/deploy/start.sh +++ b/deploy/start.sh @@ -33,7 +33,7 @@ nginx # Start API app LISTENING_PORT="8000" -if [ "x$ENABLE_RBAC" == "x" ]; then +if [ "x$REACT_APP_ENABLE_RBAC" == "x" ]; then echo "RBAC flag not configured, only launch registry app" if [ "x$PURVIEW_NAME" == "x" ]; then echo "Purview flag is not configured, run SQL registry" diff --git a/docs/dev_guide/build-and-push-feathr-registry-docker-image.md b/docs/dev_guide/build-and-push-feathr-registry-docker-image.md index 78248fa66..76654a4ba 100644 --- a/docs/dev_guide/build-and-push-feathr-registry-docker-image.md +++ b/docs/dev_guide/build-and-push-feathr-registry-docker-image.md @@ -42,7 +42,7 @@ docker run --env PURVIEW_NAME= --env AZURE_CLIENT_ID= -- ### Test SQL registry + RBAC ```bash -docker run --env ENABLE_RBAC=true --env REACT_APP_AZURE_CLIENT_ID= --env REACT_APP_AZURE_TENANT_ID= --env CONNECTION_STR= --env API_BASE=api/v1 -it --rm -p 3000:80 feathrfeaturestore/feathr-registry +docker run --env REACT_APP_ENABLE_RBAC=true --env REACT_APP_AZURE_CLIENT_ID= --env REACT_APP_AZURE_TENANT_ID= --env CONNECTION_STR= --env API_BASE=api/v1 -it --rm -p 3000:80 feathrfeaturestore/feathr-registry ``` After docker image launched, open web browser and navigate to ，verify both UI and backend api can work correctly. diff --git a/ui/.env b/ui/.env index 42f7420fa..0105a1136 100644 --- a/ui/.env +++ b/ui/.env @@ -1,4 +1,4 @@ REACT_APP_AZURE_CLIENT_ID=db8dc4b0-202e-450c-b38d-7396ad9631a5 REACT_APP_AZURE_TENANT_ID=common -REACT_APP_API_ENDPOINT=https://feathr-rbac-registry.azurewebsites.net +REACT_APP_API_ENDPOINT=https://feathr-sql-registry.azurewebsites.net REACT_APP_ENABLE_RBAC=false diff --git a/ui/src/components/projectFeatureList.tsx b/ui/src/components/projectFeatureList.tsx new file mode 100644 index 000000000..b2cee9853 --- /dev/null +++ b/ui/src/components/projectFeatureList.tsx @@ -0,0 +1,33 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { Form, Select, Table } from "antd"; + +const ProjectFeatureList: React.FC = () => { + const [project, setProject] = useState(""); + const [feature, setFeature] = useState(""); + const [features, setFeatures] = useState([]); + return ( +
+ + + +
+ ); +}; + +export default ProjectFeatureList; diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx index 37c9af920..a28159968 100644 --- a/ui/src/components/sidemenu/siteMenu.tsx +++ b/ui/src/components/sidemenu/siteMenu.tsx @@ -12,9 +12,10 @@ const { Title } = Typography; const { Sider } = Layout; const SideMenu = () => { - const showManagement = - window.environment?.enableRbac ?? - process.env.REACT_APP_ENABLE_RBAC === "true"; + const enableRBAC = window.environment?.enableRBAC; + const showManagement = enableRBAC + ? enableRBAC + : process.env.REACT_APP_ENABLE_RBAC; return ( @@ -63,7 +64,7 @@ const SideMenu = () => { > Monitoring - {showManagement && ( + {showManagement === "true" && ( Date: Wed, 3 Aug 2022 13:25:17 +0800 Subject: [PATCH 4/4] remove extra files --- ui/src/components/projectFeatureList.tsx | 33 ------------------------ 1 file changed, 33 deletions(-) delete mode 100644 ui/src/components/projectFeatureList.tsx diff --git a/ui/src/components/projectFeatureList.tsx b/ui/src/components/projectFeatureList.tsx deleted file mode 100644 index b2cee9853..000000000 --- a/ui/src/components/projectFeatureList.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useCallback, useEffect, useState } from "react"; -import { Form, Select, Table } from "antd"; - -const ProjectFeatureList: React.FC = () => { - const [project, setProject] = useState(""); - const [feature, setFeature] = useState(""); - const [features, setFeatures] = useState([]); - return ( -
- - - -
- ); -}; - -export default ProjectFeatureList;