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:

1. Add your domain in the quicksight whitelist
2. Publish and Share your dashboard
3. Add access to an account to read the Quicksight Dashboard
4. 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 dashboard
function 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::TransitController
layout "admin_transit_report_dashboard"
def index
embedder = Integration::QSEmbedder.new
embedder.call
@url = embedder.response[:embed_url]
end
end

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.