How to embed Amazon Quick sight to your ruby on rails web application
Amazon QuickSight is an excellent visualization tool to create realtime dashboard in the cloud, you don’t need to know any coding in order to produce meaningful visualization to make sense of your data. Recently QuickSight allow it visualizations (dashboard ) to be embedded into your application. In this article I am going show you just this.
Requirement
- Admin access to QuickSight
- Admin access Amazon IAM
In order to embed quicksight in to your application, you have to configure the following:
- Add your domain in the quicksight whitelist
- Publish and Share your dashboard
- Add access to an account to read the Quicksight Dashboard
- Integration with your ruby on rails app ( not limited to just rails it can be any technologies )
Add domain to Quick sight Whitelist table
Go to Quicksight console, on the top right corner click your account and then choose Manage Quicksight
On the left pane select “Domain and Embedding” and then enter your domains. You can add as many domains and sub domains as you want.
Share and Publish your dashboard
On the top left corner, click on the Quicksight logo to go to Quicksight home.
On the dashboard you want to share click on the tree dot and then confirm to open the dashboard.
The dashboard detail page appear. On the top right menu select Share and then choose Publish dashboard.
Enter a name for your dashboard and then Click on the button Publish dashboard at the bottom of the modal.
Copy the Id from the URL as shown in the fig below.
Config access to Quicksight
Go to aws console and choose IAM service.
On the left pane, Select Roles and then click on “Create role” button.
In the create role page, choose the second option which is “Another AWS account”. In the Account ID* input enter your account ID. Account ID number can be found in the top right corner of AWS menu with your account name -> My Account -> under Account Setting.
Then in next step click on “Create policy” button
In the policy creation page select on JSON tab and then enter the json as below:
{
"Version": "2012-10-17",
"Statement": [
{
"Action": "quicksight:RegisterUser",
"Resource": "*",
"Effect": "Allow"
},
{
"Action": "quicksight:GetDashboardEmbedUrl",
"Resource": "arn:aws:quicksight:ap-southeast-1:669290295929:dashboard/11ccede8-8be4-4c48-8a32-3ee9313c1b70",
"Effect": "Allow"
}
]
}
Note
In the “Resource”: “arn:aws:quicksight:ap-southeast-1:669290295929:dashboard/11ccede8–8be4–4c48–8a32–3ee9313c1b70” is an amazon resource name for Quicksight. the format is
arn:aws:quicksight:[aws_quicksight_region]:[aws_account_id]:dashboard/[quicksight_dashboard_id]
Click Review Policy to finish.
Go back to create role page and filter for the newly created policy and then click “Next”
Skip the tags and then click on “Next” Button
Create Assume User access
Go to AWS IAM console, select Users and then click on Add user button
Enter user name and tick Programmatic access option and then click Next
In the permission page select “Attach existing policy” option and then Click on Create policy button as before
In create policy page, again enter custom policy, click Review and enter the a name for policy
Note
{
"Version": "2012-10-17",
"Statement": {
"Effect": "Allow",
"Action": "sts:AssumeRole",
"Resource": "arn:aws:iam::669290295929:role/QSEmbed"
}
}
In the “Resource” node is the amazon resource name for your role.Replace that with your role ARN value. This ARN value can be found in AWS IAM console ->Roles -> Search for your created role name(QSEmbed) and then select from the result to open role details. Under the Summary section copy the value under Role ARN:
Config application
Now it is time to integrate amazon Quicksignht to our rails application.
Add the following gem to your Gemfile
# aws-sdk v3 is modular update QS dashboard
gem 'aws-sdk-quicksight', '~> 1'
gem 'aws-sdk-s3', '~> 1'
and then do
bundle install
I create ENV for AWS Quicksight as below
AWS_DSB_ID='19f9bc2f-ae9a-4994-aa2d-2dfdbc831060'
AWS_ROLE_ARN="arn:aws:iam::669290295929:role/QSEmbed"
AWS_ROLE_SESSION_NAME="embedQS"
AWS_QS_PARAMS="no" # disable on demo
AWS_REGION="ap-southeast-1"
#models/integration/qs_embedder
class Integration::QSEmbedder
attr_accessor :response
def call
credential_options = {
client: Aws::STS::Client.new,
role_arn: ENV['AWS_ROLE_ARN'],
role_session_name: ENV['AWS_ROLE_SESSION_NAME'] }assume_role_credential = Aws::AssumeRoleCredentials.new(credential_options)configs = { credentials: assume_role_credential,
region: ENV['AWS_REGION']}qs_client = Aws::QuickSight::Client.new(configs)options = { aws_account_id: '669290295929', # required
dashboard_id: '11ccede8-8be4-4c48-8a32-3ee9313c1b70',
identity_type: "IAM",
session_lifetime_in_minutes: 300,
undo_redo_disabled: false,
reset_disabled: false
} filters = { } result = qs_client.get_dashboard_embed_url(options, filters)
@response = {
embed_url: result.embed_url,
status: result.status,
request_id: result.request_id } @response end
end
Add this Amazon Quicksight Js script to your page layout
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/quicksight-embedding-js-sdk.min.js"></script>
# views/admin/report_dashboards/index.html
<h1>Dashboard</h1><div id='qs_dashboard' class='iframe-container-responsive'><!-- Iframe Dashboard here --></div><% content_for :head do %><script type="text/javascript">var dashboardfunction onDashboardLoad(payload) {console.log("Do something when the dashboard is fully loaded.");$("#qs_loading").hide()}function onError(payload) {$("#qs_loading").hide()console.log("Do something when the dashboard fails loading");}function embedDashboard() {var parameters = { }var options = {url: '<%= @url.html_safe %>',container: '#qs_dashboard',scrolling: "no",parameters: parameters};dashboard = QuickSightEmbedding.embedDashboard(options);dashboard.on("error", onError);dashboard.on("load", onDashboardLoad);}function onCountryChange(obj) {dashboard.setParameters({country: obj.value});}</script><% end%>
# controllers/admin/report_dashboards_controller.rb
class Admin::ReportDashboardsController < Admin::TransitControllerlayout "admin_transit_report_dashboard"def indexembedder = Integration::QSEmbedder.newembedder.call@url = embedder.response[:embed_url]endend
Final result looks like this.
Conclusion
Amazon Quicksight is such a powerful tool for visualization. By using Quicksight we save lot of developer time and deployment time. It is a quick tool for data exploration and modeling and require no programming skill. The downside is that it is relatively new, the permission set up is a bit hard and complicate session and cache management.