diff --git a/deploy/start.sh b/deploy/start.sh old mode 100644 new mode 100755 index 946384461..e8bd1eea5 --- 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" @@ -27,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/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 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..a28159968 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,11 @@ const { Title } = Typography; const { Sider } = Layout; const SideMenu = () => { + const enableRBAC = window.environment?.enableRBAC; + const showManagement = enableRBAC + ? enableRBAC + : 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/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 6d07e47bf..3ec3e5bdf 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; } } @@ -18,6 +19,7 @@ declare global { interface EnvironmentConfig { azureClientId: string; azureTenantId: string; + enableRBAC: boolean; } }