Inserte un panel de Amazon QuickSight en una aplicación Angular local

Cree una política de EmbedURL.

Cree una política de IAM denominada QuickSightGetDashboardEmbedURL que tenga las siguientes propiedades.

{
      "Version": "2012-10-17",		 	 	 
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}

Crear la función de Lambda.

1. Abra la página Funciones en la consola de Lambda.

2. Elija Crear función.

3. Elija Crear desde cero.

4. En Nombre de la función, introduzca get-qs-embed-url.

5. En Runtime (Tiempo de ejecución), elija Python 3.9.

6. Elija Crear función.

7. En la pestaña Código, copie el siguiente código en la función de Lambda.

import json
import boto3
from botocore.exceptions import ClientError
import time
from os import environ


qs = boto3.client('quicksight',region_name='us-east-1')
sts = boto3.client('sts')

ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account')
DASHBOARD_ID = environ['DASHBOARD_ID']

def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled):
  try:
    response = qs.get_dashboard_embed_url(
      AwsAccountId = accountId,
      DashboardId = dashboardId,
      Namespace = quicksightNamespace,
      IdentityType = 'ANONYMOUS',
      SessionLifetimeInMinutes = 600,
      UndoRedoDisabled = undoRedoDisabled,
      ResetDisabled = resetDisabled
    )
    return response
          
  except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)


def lambda_handler(event, context):
  url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl']
  return {
      'statusCode': 200,
      'url': url
  }

8. Elija Implementar.

Añada el ID del panel de control como variable de entorno.

Añada DASHBOARD_ID como variable de entorno a su función de Lambda:

Añada permisos para la función de Lambda.

Modifique la función de ejecución de la función de Lambda y agréguele la política QuickSightGetDashboardEmbedURL.

Probar la función de Lambda.

Cree y ejecute un evento de prueba. Puede usar la plantilla "Hello World", ya que la función no utilizará ninguno de los datos del evento de prueba.

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}

Crear una API en API Gateway.

Cree la aplicación con la CLI de Angular.

Añada el SDK de integración de QuickSight.

Añada código a su archivo dashboard.component.ts.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk';
import { environment } from "../../environments/environment";
import { take } from 'rxjs';
import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpClient) { }

  loadingError = false;
  dashboard: any;

  ngOnInit() {
    this.GetDashboardURL();
  }
 
  public GetDashboardURL() {
    this.http.get(environment.apiUrl)
    .pipe(
      take(1),
    )
    .subscribe((data: any) => this.Dashboard(data.url));
  }

  public async Dashboard(embeddedURL: any) {
    var containerDiv = document.getElementById("dashboardContainer") || '';
    const frameOptions = {
      url: embeddedURL,
      container: containerDiv,
      height: "850px",
      width: "100%",
      resizeHeightOnSizeChangedEvent: true,
  }
    const embeddingContext: EmbeddingContext = await createEmbeddingContext();
    this.dashboard = embeddingContext.embedDashboard(frameOptions);
  }
}

Añada código a su archivo dashboard.component.html.

Agregue el siguiente código al archivo src/app/dashboard/dashboard.component.html.

<div id="dashboardContainer"></div>

Modifique el archivo app.component.html para cargar el componente del panel de control.

Importe HttpClientModule en su archivo app.module.ts.

Configure mkcert.

Configure QuickSight para permitir su dominio.

Probar la solución.

Para iniciar un servidor de desarrollo local de Angular, ejecute el siguiente comando.

ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o

Esto habilita la capa de conexión segura (SSL) con el certificado personalizado que ha creado anteriormente.

Cuando se completa la compilación, se abre una ventana del navegador y puede ver su panel de QuickSight integrado alojado localmente en Angular.