Distribuire l'interfaccia utente di OSDU Amministrazione in Azure Data Manager for Energy

Articolo
04/17/2024

Questa guida illustra come distribuire l'interfaccia utente del Amministrazione OSDU sopra l'istanza di Azure Data Manager for Energy (ADME).

L'interfaccia utente del Amministrazione OSDU consente agli amministratori della piattaforma di gestire la partizione dei dati di Azure Data Manager per l'energia a cui ci si connette. Le attività di gestione includono diritti (gestione di utenti e gruppi), tag legali, schemi, dati di riferimento, visualizzazione e visualizzazione di oggetti su una mappa.

Prerequisiti

Installare Visual Studio Code con i contenitori di sviluppo. È possibile distribuire l'interfaccia utente Amministrazione OSDU dal computer locale usando Linux o sottosistema Windows per Linux (WSL), è consigliabile usare un contenitore di sviluppo per eliminare potenziali conflitti di versioni degli strumenti, ambienti e così via.
Istanza di Azure Data Manager per l'energia.
Registrazione dell'app Microsoft Entra ID.
Questa registrazione dell'app può essere uguale a quella usata per l'istanza di Azure Data Manager per l'energia.
Importante

Per il corretto funzionamento dell'interfaccia utente di Amministrazione, sono necessarie le autorizzazioni API seguenti per la registrazione dell'app.
Al primo accesso all'interfaccia utente Amministrazione richiederà le autorizzazioni necessarie. È anche possibile concedere le autorizzazioni necessarie in anticipo, vedere la documentazione relativa all'autorizzazione dell'API di registrazione app.

Impostazione dell'ambiente

Usare il contenitore di sviluppo in Visual Studio Code per distribuire l'interfaccia utente del Amministrazione OSDU per eliminare i conflitti dal computer locale.
Selezionare questa opzione Remote - Containers | Open per aprire un contenitore di sviluppo e clonare il repository osDU Amministrazione'interfaccia utente.
Accettare la richiesta di clonazione.
Quando viene richiesto un modello di configurazione del contenitore.
1. Selezionare Ubuntu.
2. Accettare la versione predefinita.
3. Non aggiungere funzionalità aggiuntive.
Dopo alcuni minuti, devcontainer è in esecuzione.
Aprire il terminale.

Installare l'interfaccia della riga di comando di Angular, l'interfaccia della riga di comando di Azure, npm e 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

Accedere all'interfaccia della riga di comando di Azure eseguendo il comando nel terminale. Viene visualizzata la schermata di accesso.
```
az login
```
Viene visualizzata la schermata di accesso. Immettere le credenziali e, al termine dell'operazione, viene visualizzato un messaggio di operazione riuscita.
Verificare di usare la sottoscrizione corretta.
```
az account show
```
Se necessario, usare questo codice per modificare la sottoscrizione.
```
az account set --subscription <subscription-id>
```

Configurare le variabili di ambiente

Immettere le variabili di ambiente necessarie nel terminale.

 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"

Distribuire l'account di archiviazione

Creare un gruppo di risorse. Ignorare questo passaggio se il gruppo di risorse esiste già.
```
az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION
```

Creare un account di archiviazione.

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

Configurare il sito Web statico.

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

Impostare $web autorizzazioni contenitore per consentire l'accesso anonimo.

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

Aggiungere l'URI di reindirizzamento alla registrazione dell'app.

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"

Creare e distribuire l'app Web

Passa alla cartella OSDUApp.
```
cd OSDUApp/
```
Installa le dipendenze.
```
npm install
```

Modificare i parametri nel file di configurazione che si trova in /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

L'API del Connessione or OSDU viene compilata come interfaccia tra consumer e API OSDU che eseplicano il wrapping di alcune chiamate e oggetti della catena API. Attualmente gestisce tutte le operazioni e le azioni sugli oggetti progetto e scenario.

Compilare l'interfaccia utente Web.
```
ng build
```

Caricare la compilazione in Archiviazione Account.

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

Recuperare l'URL del sito Web.
```
echo $REDIRECT_URI
```
Aprire l'URL del sito Web nel browser e verificare che funzioni correttamente e connesso all'istanza corretta di Azure Data Manager per l'energia.

Passaggi successivi

Dopo aver completato correttamente il funzionamento dell'interfaccia utente Amministrazione, è possibile:

Aggiungere il primo set di utenti.
Gestire i tag legali.
Gestire gli elenchi di controllo di accesso.

È anche possibile inserire dati nell'istanza di Azure Data Manager per l'energia:

Esercitazione sull'inserimento del parser CSV.
Esercitazione sull'inserimento di manifesti.

Riferimenti

Per informazioni sull'interfaccia utente Amministrazione OSDU, vedere OSDU GitLab.
Per altri metodi di distribuzione (pipeline CI/CD di Azure DevOps o Terraform), vedere OSDU Amministrazione UI DevOps.