Skip to content

Commit f4a9eb3

Browse files
authored
Update how-to-deploy-osdu-admin-ui.md
1 parent 766b5b2 commit f4a9eb3

File tree

1 file changed

+28
-32
lines changed

1 file changed

+28
-32
lines changed

articles/energy-data-services/how-to-deploy-osdu-admin-ui.md

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,24 @@ ms.date: 02/15/2024
1010
---
1111
# Deploy OSDU Admin UI on top of Azure Data Manager for Energy
1212

13-
This guide shows you how to deploy the OSDU Admin UI on top of your Azure Data Manager for Energy instance.
13+
This guide shows you how to deploy the OSDU Admin UI on top of your Azure Data Manager for Energy (ADME) instance.
1414

1515
The OSDU Admin UI enables platform administrators to manage the Azure Data Manager for Energy data partition you connect it to. The management tasks include entitlements (user and group management), legal tags, schemas, reference data, view, and visualize objects on a map.
1616

1717
## Prerequisites
18-
- Install [Visual Studio Code with Dev Containers](https://code.visualstudio.com/docs/devcontainers/tutorial). It's possible to deploy the OSDU Admin UI from your local computer using either Linux or Windows WSL, we recommend using a Dev Container to eliminate potential conflicts of tooling versions, environments etc.
18+
- Install [Visual Studio Code with Dev Containers](https://code.visualstudio.com/docs/devcontainers/tutorial).
19+
- It's possible to deploy the OSDU Admin UI from your local computer using either Linux or Windows Subsystem for Linux (WSL), we recommend using a Dev Container to eliminate potential conflicts of tooling versions, environments etc.
1920
- An [Azure Data Manager for Energy instance](quickstart-create-microsoft-energy-data-services-instance.md).
20-
- Add the App Registration permissions to enable Admin UI to function properly:
21-
- [Application.Read.All](/graph/permissions-reference#applicationreadall)
22-
- [User.Read](/graph/permissions-reference#applicationreadall)
23-
- [User.Read.All](/graph/permissions-reference#userreadall)
24-
25-
[![Screenshot that shows applications read all permission.](./media/how-to-deploy-osdu-admin-ui/app-permission-1.png)](./media/how-to-deploy-osdu-admin-ui/app-permission-1.png#lightbox)
26-
27-
[![Screenshot that shows user read all permission.](./media/how-to-deploy-osdu-admin-ui/app-permission-2.png)](./media/how-to-deploy-osdu-admin-ui/app-permission-2.png#lightbox)
21+
- An [Microsoft Entra ID App Registration](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app).
22+
- This App Registration can be the same as the one used for the Azure Data Manager for Energy instance.
23+
24+
> [!IMPORTANT]
25+
> The following API permissions are required on the App Registration for the Admin UI to function properly.
26+
> - [Application.Read.All](/graph/permissions-reference#applicationreadall)
27+
> - [User.Read](/graph/permissions-reference#applicationreadall)
28+
> - [User.Read.All](/graph/permissions-reference#userreadall)
29+
>
30+
> Upon first login to the Admin UI it will request the necessary permissions. You can also grant the required permissions in advance, see [App Registration API Permission documentation](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-configure-app-access-web-apis#application-permission-to-microsoft-graph).
2831
2932
## Environment setup
3033
1. Use the Dev Container in Visual Studio Code to deploy the OSDU Admin UI to eliminate conflicts from your local machine.
@@ -49,7 +52,7 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
4952

5053
[![Screenshot that shows opening terminal.](./media/how-to-deploy-osdu-admin-ui/open-terminal.png)](./media/how-to-deploy-osdu-admin-ui/open-terminal.png#lightbox)
5154

52-
1. Install Angular CLI, Azure CLI, Node.js, npm, and NVM.
55+
1. Install [Angular CLI](https://angular.io/cli), [Azure CLI](/cli/azure/install-azure-cli), [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), and [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm).
5356

5457
```bash
5558
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
@@ -63,28 +66,25 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
6366
[![Screenshot that shows installation.](./media/how-to-deploy-osdu-admin-ui/install-screen.png)](./media/how-to-deploy-osdu-admin-ui/install-screen.png#lightbox)
6467

6568
1. Log into Azure CLI by executing the command on the terminal. It takes you to the sign-in screen.
66-
```azurecli-interactive
69+
```azurecli
6770
az login
6871
```
6972

7073
1. It takes you to the sign-in screen. Enter your credentials and upon success, you see a success message.
7174

7275
[![Screenshot that shows successful login.](./media/how-to-deploy-osdu-admin-ui/login.png)](./media/how-to-deploy-osdu-admin-ui/login.png#lightbox)
73-
74-
## Configure environment variables
75-
1. Fetch `client-id` as authAppId, `resource-group`, `subscription-id`, and `location`.
76-
77-
[![Screenshot that shows how to fetch location and resource group.](./media/how-to-deploy-osdu-admin-ui/location-resource-group.png)](./media/how-to-deploy-osdu-admin-ui/location-resource-group.png#lightbox)
7876

79-
1. Fetch the value of `id` as the subscription ID by running the following command on the terminal.
80-
```azurecli-interactive
77+
1. Validate that you're using the correct subscription.
78+
```azurecli
8179
az account show
8280
```
8381
84-
1. If the above ID isn't same as the `subcription-id` from the Azure Data Manager for Energy instance, you need to change subscription.
85-
```azurecli-interactive
82+
1. If needed, use the code below to change subscription.
83+
```azurecli
8684
az account set --subscription <subscription-id>
8785
```
86+
87+
## Configure environment variables
8888
8989
1. Enter the required environment variables on the terminal.
9090
```bash
@@ -96,14 +96,14 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
9696
9797
## Deploy storage account
9898
1. Create resource group. Skip this step if the resource group exists already.
99-
```azurecli-interactive
99+
```azurecli
100100
az group create \
101101
--name $RESOURCE_GROUP \
102102
--location $LOCATION
103103
```
104104
105105
1. Create storage account.
106-
```azurecli-interactive
106+
```azurecli
107107
az storage account create \
108108
--resource-group $RESOURCE_GROUP \
109109
--location $LOCATION \
@@ -114,7 +114,7 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
114114
```
115115
116116
1. Configure the static website.
117-
```azurecli-interactive
117+
```azurecli
118118
az storage blob service-properties update \
119119
--account-name $WEBSITE_NAME \
120120
--static-website \
@@ -123,15 +123,15 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
123123
```
124124
125125
1. Set $web container permissions to allow anonymous access.
126-
```azurecli-interactive
126+
```azurecli
127127
az storage container set-permission \
128128
--name '$web' \
129129
--account-name $WEBSITE_NAME \
130130
--public-access blob
131131
```
132132
133133
1. Add the redirect URI to the App Registration.
134-
```azurecli-interactive
134+
```azurecli
135135
export REDIRECT_URI=$(az storage account show --resource-group $RESOURCE_GROUP --name $WEBSITE_NAME --query "primaryEndpoints.web") && \
136136
echo "Redirect URL: $REDIRECT_URI" && \
137137
echo "Add the redirect URI above to the following App Registration's Single-page Application (SPA) section: https://ms.portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Authentication/appId/$ADMINUI_CLIENT_ID/isMSAApp~/false"
@@ -159,7 +159,7 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
159159
...
160160
"tenant_id": "<tenant_id>", // Entra ID tenant ID
161161
"client_id": "<client_id>", // App Registration ID to use for the admin UI, usually the same as the ADME App Registration ID, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a"
162-
"redirect_uri": "<https://storageaccount.zXX.web.core.windows.net/>", // This is the website URL ($REDIRECT_URI)
162+
"redirect_uri": "<redirect_uri>", // This is the website URL ($REDIRECT_URI), i.e. "https://contoso.z1.web.core.windows.net"
163163
"scope": "<client_id>/.default" // Scope of the ADME instance, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a/.default"
164164
},
165165
"api_endpoints": { // Just replace contoso.energy.azure.com with your ADME_URL after removing https or wwww in all the API endpoints below.
@@ -179,18 +179,14 @@ The OSDU Admin UI enables platform administrators to manage the Azure Data Manag
179179

180180
> [!NOTE]
181181
> [OSDU Connector API](https://community.opengroup.org/osdu/ui/admin-ui-group/admin-ui-totalenergies/connector-api-totalenergies) is built as an interface between consumers and OSDU APIs wrapping some API chain calls and objects. Currently, it manages all operations and actions on project and scenario objects.
182-
183-
1. If you aren't able to give app permissions in the Prerequisite step because of the subscription constraints, remove `User.ReadBasic.All` and `Application.Read.All` from the `src/config/environments/environment.ts`. Removing these permissions would disable the Admin UI from converting the OIDs of users and applications into the user names and application names respectively.
184-
185-
[![Screenshot that shows graph permissions.](./media/how-to-deploy-osdu-admin-ui/graph-permission.png)](./media/how-to-deploy-osdu-admin-ui/graph-permission.png#lightbox)
186182

187183
1. Build the web UI.
188184
```bash
189185
ng build
190186
```
191187

192188
1. Upload the build to Storage Account.
193-
```azurecli-interactive
189+
```azurecli
194190
az storage blob upload-batch \
195191
--account-name $WEBSITE_NAME \
196192
--source ./dist/OSDUApp \

0 commit comments

Comments
 (0)