Implementación de la interfaz de usuario de administrador de OSDU sobre Azure Data Manager for Energy

Artículo
04/18/2024

En esta guía se muestra cómo implementar la interfaz de usuario de administrador de OSDU sobre la instancia de Azure Data Manager for Energy (ADME).

La interfaz de usuario de administrador de OSDU permite a los administradores de plataforma administrar la partición de datos de Azure Data Manager for Energy a la que se conecta. Las tareas de administración incluyen derechos (administración de usuarios y grupos), etiquetas legales, esquemas, datos de referencia, vista y visualización de objetos en un mapa.

Requisitos previos

Instale Visual Studio Code con contenedores de desarrollo. Es posible implementar la interfaz de usuario de administrador de OSDU desde el equipo local mediante Linux o Subsistema de Windows para Linux (WSL), se recomienda usar un contenedor de desarrollo para eliminar posibles conflictos de versiones de herramientas, entornos, etc.
Una instancia de Azure Data Manager for Energy.
Un registro de aplicaciones de Microsoft Entra ID.
Este registro de aplicaciones puede ser el mismo que el que se usa para la instancia de Azure Data Manager for Energy.
Importante

Los siguientes permisos de API son necesarios en el registro de aplicaciones para que la interfaz de usuario de administración funcione correctamente.
Tras iniciar sesión en la interfaz de usuario de administración, se le solicitarán los permisos necesarios. También puede conceder los permisos necesarios de antemano, consulte la documentación de los permisos de API para el registro de aplicaciones.

Configuración del entorno

Use el contenedor de desarrollo en Visual Studio Code para implementar la interfaz de usuario de administrador de OSDU para eliminar conflictos de la máquina local.
Seleccione Remote - Containers | Open para abrir un contenedor de desarrollo y clonar el repositorio de la interfaz de usuario de administración de OSDU.
Acepte el mensaje de clonación.
Cuando se le solicite una plantilla de configuración de contenedor.
1. Seleccione Ubuntu
2. Acepte la versión predeterminada.
3. No agregue ninguna característica adicional.
Después de unos minutos, el devcontainer se ejecutará.
Abra el terminal.

Instale la CLI de Angular, la CLI de Azure, npm y el Administrador de versiones de Node (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

Inicie sesión en la CLI de Azure ejecutando el comando en el terminal. Le llevará a la pantalla de inicio de sesión.
```
az login
```
Le llevará a la pantalla de inicio de sesión. Escriba sus credenciales y, después de que se realice correctamente, verá un mensaje de operación correcta.
Asegúrese de que está usando la suscripción correcta.
```
az account show
```
Si es necesario, use este código para cambiar la suscripción.
```
az account set --subscription <subscription-id>
```

Configuración de las variables de entorno

Escriba las variables de entorno necesarias en el 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"

Implementación de la cuenta de almacenamiento

Creación de un grupo de recursos. Omita este paso si el grupo de recursos ya existe.
```
az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION
```

Cree una cuenta de almacenamiento.

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

Configuración del sitio web estático.

az storage blob service-properties update \
    --account-name $WEBSITE_NAME \
    --static-website \
    --404-document index.html \
    --index-document index.html

Establezca $web permisos de contenedor para permitir el acceso anónimo.

az storage container set-permission \
    --name '$web' \
    --account-name $WEBSITE_NAME \
    --public-access blob

Agregue el URI de redirección al registro de aplicaciones.

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"

Compilación e implementación de la aplicación web

Vaya a la carpeta OSDUApp.
```
cd OSDUApp/
```
Instale las dependencias.
```
npm install
```

Modifique los parámetros del archivo de configuración ubicado en /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/"
  }
  ...
}

Nota:

API del conector de OSDU se crea como una interfaz entre los consumidores y las API de OSDU que encapsulan algunas llamadas y objetos de la cadena de API. Actualmente, administra todas las operaciones y acciones en objetos de proyecto y escenario.

Compile la interfaz de usuario web.
```
ng build
```

Cargue la compilación en la cuenta de almacenamiento.

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

Capture la dirección URL del sitio web.
```
echo $REDIRECT_URI
```
Abra la dirección URL del sitio web en el explorador y compruebe que funciona correctamente y que está conectada a la instancia correcta de Azure Data Manager for Energy.

Pasos siguientes

Una vez que la interfaz de usuario de administración funcione correctamente, puede hacer lo siguiente:

También puede ingerir datos en la instancia de Azure Data Manager for Energy:

Referencias

Para obtener información sobre la interfaz de usuario de administrador de OSDU, consulte GitLab de OSDU.
Para ver otros métodos de implementación (canalización de CI/CD de Terraform o Azure DevOps), consulte interfaz de usuario de administración de OSDU DevOps.

Share via