Optimizing Amazon QuickSight Embedded Dashboards: Incorporation, Namespace Management, and Performance Issues

Hello everyone,

I have some questions about using Amazon QuickSight Embedded, specifically regarding embedding multiple dashboards for different customers in my portal.

  1. Embedding dashboards by customer: I’ve seen that it’s possible to embed individual dashboards in the portal, but what I really want is to embed all the dashboards that a specific customer has access to. The idea is to create a shared folder, for example, “Customer A”, and this customer would have access to all the dashboards in that folder directly in my portal, with a visual experience similar to QuickSight. Is this possible? If so, what would be the best approach to maintain the QuickSight experience within my portal, while ensuring security and performance?

  2. Listing dashboards in the portal: To list and embed each customer’s dashboards, do I need to pass parameters such as namespace in the API, corresponding to each customer’s name? Or is it enough to just share a folder with all the customer’s dashboards and that solves the problem? I’m facing a situation where I can only embed dashboards from the main account and not from the different namespaces.

  3. Performance issues with iframes: When embedding a dashboard in my portal using the direct link of the iframe generated by QuickSight, I noticed that the performance drops, especially in dashboards that contain data in the format of “table” or “pivot table”. Navigation and interaction in these cases are slow. Does anyone have any suggestions on how I can improve the performance of these dashboards embedded via iframe?

If anyone has any insights or suggestions, especially on how to optimize this process for a production environment, I would greatly appreciate it!

  1. Embedding dashboards by client:

Yes, it is possible to embed all the dashboards that a specific client has access to in your portal. The recommended approach is to use AWS Identity and Access Management (IAM) to create separate namespaces (AWS accounts or AWS Organizations) for each client. Within each namespace, you can create a folder or multiple folders containing the dashboards that the client should have access to.

To maintain the QuickSight experience within your portal while ensuring security and performance, you can use the QuickSight Embedding SDK. This SDK allows you to embed QuickSight dashboards in your application while providing a seamless user experience similar to the QuickSight console.

Here’s a high-level approach:

  • Create a separate namespace (AWS account or AWS Organizations) for each client.

  • Within each namespace, create a folder or multiple folders containing the dashboards for that client.

  • Use IAM policies to grant the necessary permissions to each client’s namespace, allowing them to access only their designated folders and dashboards.

  • In your portal, use the QuickSight Embedding SDK to embed the dashboards for each client. The SDK provides APIs to list and render dashboards within an iframe or a React component.

  • Implement authentication and authorization mechanisms in your portal to ensure that each client can only access their designated dashboards.

  1. Listing dashboards in the portal:

To list and embed each client’s dashboards in your portal, you will need to use the QuickSight APIs or the Embedding SDK. You can pass the AwsAccountId parameter (which corresponds to the namespace or AWS account) when calling the QuickSight APIs or using the Embedding SDK. This will allow you to list and embed dashboards from the specific namespace associated with each client.

If you have shared a folder with all the client’s dashboards within the same namespace, you can use the ListDashboards API or the corresponding SDK method to retrieve the list of dashboards in that folder. Then, you can use the GetDashboardEmbedUrl API or the corresponding SDK method to generate the embed URLs for each dashboard and embed them in your portal.

  1. Performance issues with iframes:

Performance issues with embedded dashboards, especially those containing tables or pivot tables, can be caused by several factors, including network latency, browser rendering performance, and the complexity of the dashboard itself.

Here are some suggestions to improve the performance of embedded dashboards:

  • Use the QuickSight Embedding SDK: Instead of using the direct iframe link generated by QuickSight, consider using the QuickSight Embedding SDK. The SDK provides better performance and a more seamless user experience by leveraging modern web technologies like React or Angular.

  • Optimize network performance: Ensure that your application and QuickSight are hosted in the same AWS region to minimize network latency. Additionally, you can use AWS CloudFront or other CDN services to cache static assets and improve content delivery.

  • Optimize dashboard design: Simplify the dashboard design by reducing the number of visualizations, filters, and data sources. Avoid complex calculations or transformations within the dashboard.

  • Implement pagination or lazy loading: If your dashboards contain large tables or pivot tables, consider implementing pagination or lazy loading techniques to load data in smaller chunks, reducing the initial load time.

  • Use caching mechanisms: Implement caching mechanisms within your application to store and reuse frequently accessed dashboard data or configurations, reducing the need to fetch data from QuickSight on every request.

  • Monitor and optimize browser performance: Analyze browser performance metrics and optimize your application’s JavaScript and CSS to reduce rendering times and improve overall responsiveness.

Additionally, you can leverage QuickSight’s performance optimization features, such as SPICE (Super-fast Parallel In-memory Calculation Engine) and columnar storage formats, which can significantly improve query performance for certain types of data and workloads.

1 Like