QuickSight Embedded Dashboard

Dans cet article, je vais faire un rapide tour des fonctionnalités de QuickSight afin de vous présenter comment intégrer un tableau de bord à une application et ce de manière générique. Il n’y aura pas de code dans cet article mais un exemple qui est adaptable à plusieurs architectures.

Qu’est-ce que QuickSight ?

Amazon QuickSight est un service Amazon Web Services (AWS) qui permet de créer et analyser des visualisations de données. Il permet d'obtenir des informations à partir de données, rapidement, n'importe où et sur n'importe quel appareil. Il est possible de charger des fichiers CSV et Excel, de connecter des applications SaaS comme Salesforce, d’accéder à des bases de données sur site comme SQL Server, MySQL et PostgreSQL, et aussi les sources de données AWS telles qu'Amazon Redshift, Amazon RDS, Amazon Aurora, Amazon Athena et Amazon S3.

Contexte

Dans un monde où les PS5 sont en stock, je vais utiliser un ensemble de données qui représente le stock de PS5 par pays et continent. Un tableau de bord permet de visualiser ces données sur une carte ou simplement dans un tableau. J’utilise le système de connexion via QuickSight, mais il est possible aussi d’utiliser IAM pour authentifier un utilisateur. Pour aller plus loin, je souhaite que les utilisateurs d’un continent ne puissent pas connaître les stocks d’un autre continent. Pour ce faire, j’utilise les RLS (Row-Level Security).

Architecture

Je me base sur une architecture globale et classique afin qu’elle s’adapte facilement à la majorité des cas. Elle est donc composée de :

  • Une application
  • Un serveur (ou pas #serverless)
  • Un accès vers AWS

Le serveur peut créer un utilisateur sur QuickSight et aussi récupérer le lien vers le tableau de bord à intégrer pour l’utilisateur courant. Il sera question de serveur dans la suite du document mais il est tout à fait possible de s’appuyer sur un système FaaS.

L’application consomme des services du serveur et récupère le tableau de bord à intégrer directement sur QuickSight via un lien généré. Pour cette partie, il est possible d’utiliser des bibliothèques comme amazon-quicksight-embedding-sdk pour les applications web. Cette option facilite l’utilisation et l’intégration du tableau de bord dans la page HTML de notre application. Elle permet de gérer les cas d’erreur mais aussi les options de paramétrages. Dans son cas minimal, seulement l’URL et les informations de taille allouée dans la page sont nécessaires.

Données

Les données utilisées peuvent provenir de multiples sources. Un fichier CSV dans le cas le plus trivial, depuis un hébergement S3 ou encore depuis Athena (service de requêtage SQL). Pour mon exemple, j’utilise les données ci-dessous :

name country continent stock
PS5 France Europe 200
XBOX series X France Europe 98
PS5 Spain Europe 300
XBOX series X Spain Europe 200
PS5 US North America 150
PS5 China Asia 12

Intégration du tableau de bord

D’après la documentation officielle AWS, il faut respecter et suivre certaines étapes pour intégrer un tableau dans une application.

Partager et autoriser

La documentation officielle indique qu’il faut partager le tableau de bord depuis l’interface de QuickSight et ensuite ajouter les domaines qui accéderont au tableau de bord dans QuickSight.

Partage du tableau de bord

Depuis QuickSight, il faut cliquer sur le bouton share et sélectionner Publish dashboard.

Il faut savoir que lorsque vous publiez un tableau de bord, vous pouvez choisir d’activer ou désactiver les options suivantes :

  • Advanced filtering (Filtrage avancé) – Permet aux utilisateurs du tableau de bord de :
    • Se concentrer sur ou exclure certains points de données.
    • Utiliser le panneau de filtre.
    • Connaître les représentations visuelles filtrées.
    • Identifier les filtres appliqués dans chaque représentation visuelle.
  • Autoriser le téléchargement CSV des données – Permet aux utilisateurs du tableau de bord de télécharger les données sous un fichier, comme suit :
    • Pour les données sous forme de tableaux croisés dynamiques et de tableaux graphiques uniquement, téléchargez dans un fichier au format CSV (valeurs séparées par des virgules) ou au format Microsoft Excel (.xlsx).
    • Pour toutes les visualisations, téléchargez dans un fichier au format CSV (valeurs séparées par des virgules).
    • Vous ne pouvez pas télécharger un fichier d’un insights. AWS utilise le machine learning pour analyser les données et mettre à disposition des aperçus associés. Ces aperçus sont des insights.

Autorisation du nom de domaine

La documentation officielle indique la procédure à suivre :

  1. Cliquez sur l'icône du profil en haut à droite.
  2. Choisissez Manage (Gérer QuickSight). Vous devez être administrateur pour accéder à cet écran.
  3. Choisissez Domains and Embedding (Domaine et intégration) sur la gauche. Les domaines dans lesquels vous pouvez intégrer un tableau de bord sont répertoriés en bas de la page.
  4. (Facultatif) Vous pouvez ajouter un nouveau domaine ici en le saisissant dans la case Domain (Domaine). Vous pouvez également choisir Include subdomains (Inclure les sous-domaines) pour autoriser des tableaux de bord intégrés sur tous les sous-domaines. Choisissez Add (Ajouter) pour ajouter le domaine.
    Vous pouvez modifier ou supprimer un domaine existant en choisissant l'icône en regard de chaque domaine dans la liste en bas de la page.

Gérer les permissions

La documentation officielle présente les permissions IAM à accorder à l’utilisateur qui fera les demandes d’enregistrement des nouveaux utilisateurs QuickSight et la récupération des liens vers les tableaux de bord à embarquer.

Dans notre exemple nous allons autoriser la création de compte et l’accès à GetDashboardEmbedUrl pour notre utilisateur IAM, toutes les régions et seulement sur le tableau de bord. La stratégie IAM ressemble à :

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:RegisterUser",
            "Resource": "*",
            "Effect": "Allow"
        },
        {
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "arn:aws:quicksight:*:<AwsAccount>:dashboard/<DoashboardId>",
            "Effect": "Allow"
        }
    ]
}

Cette stratégie doit être appliquée à l’utilisateur IAM qui sera utilisé dans notre serveur.

Authentifier et obtenir le lien

La documentation officielle explique la procédure à exécuter pour authentifier un utilisateur et récupérer son lien vers le tableau de bord. Les commandes sont présentées via la AWS CLI pour indiquer les paramètres à utiliser, mais elles sont facilement retranscriptibles en SDK (JS, python, …) Je ne vais pas présenter toutes les commandes et possibilités présentes dans la documentation (création d’un compte, création d’un groupe, ajouter un rôle à un utilisateur IAM, …)

Dans mon cas de figure, je veux enregistrer un utilisateur sur QuickSight et récupérer son lien. Pour ce faire, deux commandes sont importantes.

Enregistrement de l’utilisateur

La documentation officielle de RegisterUser indique tous les paramètres et les résultats possibles.

Dans mon cas, nous allons utiliser les paramètres suivants pour créer un utilisateur.

aws quicksight register-user \
     --aws-account-id <AwsAccount>\
     --namespace default \
     --identity-type QUICKSIGHT \
     --user-role READER \
     --user-name johndoe \
     --email john.doe@example.com \

Il est possible de prendre IAM comme type d’identité. De cette manière, c’est l’utilisateur qui exécute les commandes qui sera utilisé.

Récupération du lien

La documentation officielle de GetDashboardEmbedUrl indique tous les paramètres et les résultats possibles.

Dans mon cas, nous allons utiliser les paramètres suivants pour récupérer le lien d’un utilisateur en passant le username dans userArn.

aws quicksight get-dashboard-embed-url \
     --aws-account-id <awsAccount> \
     --dashboard-id <dashboardId> \
     --identity-type QUICKSIGHT \
     --user-arn arn:aws:quicksight:<region>:<awsAccount>:user/default/<username>

La réponse contient le lien vers le tableau de bord qui sera utilisé dans la partie suivante.

Embarquer le dashboard

La documentation officielle de cette étape est très succincte. Car une fois le lien récupéré, il suffit de l’intégrer à votre application comme si vous vouliez intégrer une page externe. Le lien est même accessible directement depuis un navigateur. Elle indique aussi la possibilité d’utiliser un SDK afin d’augmenter les capacités d’intégration du tableau de bord.

RLS (Row-Level Security)

Ce système permet de définir des règles d’affichage des données. Pour ce faire, il faut ajouter les RLS sur le dataset cible. Les RLS sont aussi des datasets. Le format est un tableau contenant les username sur la première colonne et les autres colonnes sont les filtres.

Pour rappel, les tableaux de bord sont des représentations des analyses qui sont effectuées sur les datasets. La documentation officielle indique comment intégrer ces RLS dans QuickSight.

Dans mon cas, les données suivantes vont gérer les droits de visualisation des données en fonction des continents.

username continent
johndoe North America
admin Europe, North America, Asia

Dans cet exemple, johndoe ne verra que les données de l’Amérique du nord alors qu’admin verra pour l’Europe, l’Amérique du nord et l’Asie.

Il est possible de gérer ces règles sur les groupes d’utilisateurs et non les utilisateurs directement. La première colonne ne représente donc plus les utilisateurs mais les groupes, le fonctionnement est donc similaire.

RLS automatisés

Il est souvent nécessaire d’avoir une gestion des droits qui soit évolutive en fonction des utilisateurs qui vont avoir accès à votre application et donc au tableau de bord QuickSight. Le dataset qui sert d’entrée au RLS doit donc évoluer.

Le dataset doit être mis à jour régulièrement. Cette commande de mise à jour est paramétrable depuis la console de QuickSight. La documentation officielle nous indique les différentes possibilités.

Athena

Dans mon cas, Athéna est notre source de données. J’ai donc utilisé une vue spécifique qui me permet de générer une représentation de mes RLS. Cette vue est basée sur les données récupérées sur les différentes sources à analyser, dont la liste de nos utilisateurs. C’est à partir de ces utilisateurs que je construis les RLS.

S3

Il est possible d’imaginer que les RLS soient présentes sur un fichier CSV sur un S3. Ce fichier serait mis à jour par les applications. Par le même principe, QuickSight irait chercher régulièrement ce fichier pour mettre à jour son dataset et ainsi ajuster ses RLS.

alt_text
source : https://aws.amazon.com/blogs/big-data/embed-interactive-dashboards-in-your-application-with-amazon-quicksight/

Conclusion

Dans cet article, j’ai voulu faire un exemple en regroupant les informations que j’ai pu collecter pendant une réalisation pour un client.

On peut constater la simplicité d’intégrer un tableau de bord dans vos applications. La partie la plus longue, plutôt que difficile, est la mise en place des RLS. Surtout si on souhaite mettre en place un système automatisé afin de pouvoir gérer nos utilisateurs en fonction d’un provider d’authentification autre que Cognito.


Vous avez trouvé cette publication utile? Cliquer sur
Ippon
Ippon est un cabinet de conseil en technologies, créé en 2002 par un sportif de Haut Niveau et un polytechnicien, avec pour ambition de devenir leader sur les solutions Digitales, Cloud et BigData.

Ippon accompagne les entreprises dans le développement et la transformation de leur système d’information avec des applications performantes et des solutions robustes.

Ippon propose une offre de services à 360° pour répondre à l’ensemble des besoins en innovation technologique : Conseil, Design, Développement, Hébergement et Formation.

Nous avons réalisé, en 2017, un chiffre d’affaires de 31 M€ en croissance organique de 30%. Nous sommes aujourd’hui un groupe international riche de plus de 320 consultants répartis en France, aux USA, en Australie et au Maroc.
FRANCE Website LinkedIn