Mayuresh
Mayuresh Full stack developer working on Ruby on Rails and React

How to Integrate QuickSight into a Rails React Application

How to Integrate QuickSight into a Rails React Application

QuickSight, a business intelligence service by Amazon Web Services (AWS), provides a cloud-based data visualization and analytics platform.

To integrate QuickSight into a Rails React application, you can follow the below steps:

  • First of all, you need to create a dashboard on quicksight
  • create a cognito pool and associate it with the quicksight
  • add gem 'aws-sdk-quicksight’ and gem 'aws-sdk-cognitoidentity’ to your gemfile

    To associate cognito with quicksight go to ‘Security & permissions’

    Click on the “Add or Remove” button next to “Amazon Cognito user pools”.

  • Now add quicksight embedder service which will fetch the dashboard URL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
require 'aws-sdk-quicksight'
require 'aws-sdk-cognitoidentity'
class QuicksightEmbedder
  attr_reader :user
  def initialize
    @user = User.current
  end

  def get_dashboard_url
    assume_role_resp = assume_cognito_role
    qs_client_configs = set_quicksight_client_configs(assume_role_resp)
    qs_client = Aws::QuickSight::Client.new(qs_client_configs)
    register_user_in_quicksight(qs_client)
    result = get_embed_url(qs_client)
    render json: { embed_url: result.embed_url, status: result.status }
  end

  private

  def get_embed_url(qs_client)
    dashboard_params = {
      aws_account_id: ENV['AWS_ACCOUNT_ID'],
      dashboard_id: *dashboard_id,
      identity_type: 'IAM',
      session_lifetime_in_minutes: 300
    }
    qs_client.get_dashboard_embed_url(dashboard_params)
  end

  def assume_cognito_role
    client = Aws::CognitoIdentity::Client.new({ region: *AWS_REGION })
    # Note that the client.get_id call here is what creates a new Cognito user.
    get_id_response = client.get_id({ identity_pool_id: *cognito_identity_pool_id })
    token_resp = client.get_open_id_token({
                                            identity_id: get_id_response.identity_id
                                          })
    configs = {
      credentials: Aws::Credentials.new(
        ENV['AWS_ACCESS_KEY_ID'],
        ENV['AWS_SECRET_ACCESS_KEY']
      ),
      region: 'us-east-1'
    }
    sts = Aws::STS::Client.new(configs)
    assume_role_params = {
      role_arn: cognito_identity_role_arn,
      role_session_name: @user.email,
      web_identity_token: token_resp.token
    }
    # Now we assume the identity pool role:
    sts.assume_role_with_web_identity(assume_role_params)
  end

  def cognito_identity_role_arn
    *you can find this arn in cognito pool
  end

  def set_quicksight_client_configs(assume_role_resp)
    Aws.config.update({
                        access_key_id: assume_role_resp.credentials.access_key_id,
                        secret_access_key: assume_role_resp.credentials.secret_access_key,
                        session_token: assume_role_resp.credentials.session_token,
                        region: *region
                      })
    {
      credentials: assume_role_resp,
      region: *region
    }
  end

  def register_user_in_quicksight(qs_client)
    qs_client.register_user({
      identity_type: 'IAM',
      email: user.email,
      user_role: 'READER',
      iam_arn: cognito_identity_role_arn,
      session_name: user.email,
      aws_account_id: ENV['AWS_ACCOUNT_ID'],
      namespace: 'default'
    })
  end
end

This method will give you dashboard ID from which you can fetch the quicksight dashboard

  • Then create a react component and call this get_dashboard_url method
  • Component is as follows:-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { useEffect, useState } from 'react';

const QuicksightDashboard = () => {
  useSetBreadCrumb([{ name: 'Quicksight Dashboard' }]);
  const [EmbedURL, setEmbedURL] = useState('');
  useEffect(() => {
    getRequest({
      url: '/quicksight_dashboard/get_dashboard_url',
    }).then(data => {
      setEmbedURL(data.embed_url);
    });
  }, []);

  return (
    <div>
      <div id="embeddingContainer" />
      <iframe
        title="quicksightdashboard"
        style=
        src={EmbedURL}
      />
    </div>
  );
};

export default QuicksightDashboard;

this component will hit a request and get the dashboard URL and then it will show it on the page using an iframe

Integrating QuickSight into a Rails React application can be a great way to add powerful data visualization capabilities to your web application. With the use of the AWS SDKs and the QuickSight Embedding API, you can easily fetch the dashboard URL and display the dashboard using an iframe in your application.

References:-

  1. QuickSight Developer Guide:
  2. AWS SDK for Ruby - QuickSight
  3. AWS SDK for Ruby - CognitoIdentity
  4. QuickSight Embedding API

comments powered by Disqus