Deploy OSDU Admin UI on top of Azure Data Manager for Energy

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

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.

Prerequisites

Environment setup

  1. Use the Dev Container in Visual Studio Code to deploy the OSDU Admin UI to eliminate conflicts from your local machine.

  2. Select Remote - Containers | Open to open a Development Container and clone the OSDU Admin UI repository.

    Open in Remote - Containers

  3. Accept the cloning prompt.

    Screenshot that shows cloning the repository.

  4. When prompted for a container configuration template.

    1. Select Ubuntu.
    2. Accept the default version.
    3. Don't add any extra features.
  5. After a few minutes, the devcontainer is running.

    Screenshot that shows running devcontainer.

  6. Open the terminal.

    Screenshot that shows opening terminal.

  7. Install Angular CLI, Azure CLI, npm, and Node Version Manager (NVM).

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && \
    nvm install 14.17.3 && \
    export NG_CLI_ANALYTICS=false && \ 
    npm install -g @angular/cli@13.3.9 && \
    curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
    

    Screenshot that shows installation.

  8. Log into Azure CLI by executing the command on the terminal. It takes you to the sign-in screen.

    az login
    
  9. It takes you to the sign-in screen. Enter your credentials and upon success, you see a success message.

    Screenshot that shows successful login.

  10. Validate that you're using the correct subscription.

    az account show
    
  11. If needed, use this code to change subscription.

    az account set --subscription <subscription-id>
    

Configure environment variables

  1. Enter the required environment variables on the terminal.
     export ADMINUI_CLIENT_ID="" ## App Registration to be used by OSDU Admin UI, usually the client ID used to provision ADME
     export WEBSITE_NAME="" ## Unique name of the static web app or storage account that will be generated. Storage account name must be between 3 and 24 characters in length and use numbers and lower-case letters only.
     export RESOURCE_GROUP="" ## Name of resource group
     export LOCATION="" ## Azure region to deploy to, i.e. "westeurope"
    

Deploy storage account

  1. Create resource group. Skip this step if the resource group exists already.

    az group create \
        --name $RESOURCE_GROUP \
        --location $LOCATION
    
  2. Create storage account.

    az storage account create \
        --resource-group $RESOURCE_GROUP \
        --location $LOCATION \
        --name $WEBSITE_NAME \
        --sku Standard_LRS \
        --public-network-access Enabled \
        --allow-blob-public-access true
    
  3. Configure the static website.

    az storage blob service-properties update \
        --account-name $WEBSITE_NAME \
        --static-website \
        --404-document index.html \
        --index-document index.html
    
  4. Set $web container permissions to allow anonymous access.

    az storage container set-permission \
        --name '$web' \
        --account-name $WEBSITE_NAME \
        --public-access blob
    
  5. Add the redirect URI to the App Registration.

    export REDIRECT_URI=$(az storage account show --resource-group $RESOURCE_GROUP --name $WEBSITE_NAME --query "primaryEndpoints.web") && \
    echo "Redirect URL: $REDIRECT_URI" && \
    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"
    

    Screenshot showing redirect URIs of an App Registration.

Build and deploy the web app

  1. Navigate to the OSDUApp folder.

    cd OSDUApp/
    
  2. Install the dependencies.

    npm install
    
  3. Modify the parameters in the config file located at /src/config/config.json.

    {
        "mapboxKey": "key", // This is optional for the access token from Mapbox.com and used to visualize data on the map feature.
        ...
        "data_partition": "<adme_data_partition>", // ADME Data Partition ID (i.e. opendes)
      "idp": {
         ...
         "tenant_id": "<tenant_id>", // Entra ID tenant ID
         "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"
         "redirect_uri": "<redirect_uri>", // This is the website URL ($REDIRECT_URI), i.e. "https://contoso.z1.web.core.windows.net"
         "scope": "<client_id>/.default" // Scope of the ADME instance, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a/.default"
      },
      "api_endpoints": { // Just replace contoso.energy.azure.com with your ADME_URL after removing https or wwww in all the API endpoints below.
         "entitlement_endpoint": "https://contoso.energy.azure.com/api/", 
         "storage_endpoint": "https://contoso.energy.azure.com/api/",
         "search_endpoint": "https://contoso.energy.azure.com/api/",
         "legal_endpoint": "https://contoso.energy.azure.com/api/",
         "schema_endpoint": "https://contoso.energy.azure.com/api/",
         "osdu_connector_api_endpoint":"osdu_connector", // Optional. API endpoint of the OSDU Connector API*
         "file_endpoint": "https://contoso.energy.azure.com/api/",
         "graphAPI_endpoint": "https://graph.microsoft.com/v1.0/",
         "workflow_endpoint": "https://contoso.energy.azure.com/api/"
      }
      ...
    }
    

    Note

    OSDU Connector API 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.

  4. If you are not able to give access to the app as defined in the prerequisite step, remove User.Read, 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 and hence would disable the autocomplete feature of resolving OIDs from names.

  5. Build the web UI.

    ng build
    
  6. Upload the build to Storage Account.

    az storage blob upload-batch \
        --account-name $WEBSITE_NAME \
        --source ./dist/OSDUApp \
        --destination '$web' \
        --overwrite
    
  7. Fetch the website URL.

    echo $REDIRECT_URI
    
  8. Open the Website URL in the browser and validate that it's working correctly and connected to the correct Azure Data Manager for Energy instance.

Next steps

After you have a successful Admin UI working, you can:

You can also ingest data into your Azure Data Manager for Energy instance:

References

For information about OSDU Admin UI, see OSDU GitLab.
For other deployment methods (Terraform or Azure DevOps CI/CD pipeline), see OSDU Admin UI DevOps.