You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »


Introduction

The Apache Superset Userview Menu plugin is used to integrate Apache Superset dashboards into Joget DX Userview Menu. User can choose to embed their dashboard in either public or protected. Customisation options can be configured to show or hide before rendering the dashboard.

This plugin is created with the use of Superset Embedded SDK to embed the Superset dashboards into Joget DX.

This plugin source code and jar is available in JogetOSS repository at https://github.com/jogetoss/superset-menu.


Plugin Information

Plugins Available in the Bundle:

  1. Apache Superset Userview Menu

This plugin bundle is compatible with Joget DX 8.


Expected Outcome

Able to display an Apache Superset dashboard in Joget Userview Menu as shown in Figure 1.

Figure 1: A dashboard from Apache Superset displayed in userview menu


Get Started

Prerequisites / Assumptions

Before proceeding, make sure you have the following prerequisites:

  • Docker installed on your system
  • Basic familiarity with Docker Compose
  • Familiarity with Apache Superset

Please follow the link to setup Apache Superset using Docker: https://superset.apache.org/docs/installation/installing-superset-using-docker-compose/.

If you wish to use other means other than Docker to setup Apache Superset, please dive into their documentation under Installation and Configuration for more details.

How to install Apache Superset (Simplified Version)

1. Install a Docker Engine and Docker Compose

2. Clone Superset's GitHub repository

git clone https://github.com/apache/superset.git


3. Launch Superset Through Docker Compose

Enter the "superset" folder

cd superset


Run in development mode using the following code:

docker compose up


In docker, you can see that the superset container is running:

Figure 2: Docker Superset Container Running


You will need to wait a short while for all the containers to initialise and run around 5-10 minutes. After everything is done, you will be able to login and see the landing page.


4.  Log in to Superset

Wait for a short while, after that you can launch http://localhost:8088/ which is the default hosting location, and you can see the following login page.

Username "admin", password "admin" will be the default user credentials.

Figure 3: Hosting Apache Superset Locally


After logging in, this will be the main page of superset.

Figure 4: Landing page of Superset

First steps to get started in Apache Superset (Debugging)

1. If you are not able to login

Figure 5: Invalid Login

You might need to run following command to setup username and password manually:

docker-compose exec superset bash docker/docker-init.sh


2. Try to open the dashboard in incognito to see whether the dashboard is really "public", if access is denied

Figure 6: Access is Denied

Try adding the permissions as shown in Configure All Dashboard to be Public.


3. If you can open the dashboard in incognito, but cannot see the dashboard in Joget

Figure 7: Cannot load Public Superset Dashboard in Joget

Try following Disabling Talisman. [Source: node.js - Problem with Superset dashboard embedding in web app - Stack Overflow]


4. If public dashboard is working in Joget but protected dashboard is not working

Figure 8: Cannot load Protected Superset Dashboard in Joget


There might be a problem regarding the CSRF session token issue. Below is Joget tomcat log.

Figure 9: CSRF session token missing

Try following Disabling CSRF protection. 

Steps

Where to get plugin

Please refer to Source Code and Plugin Download.

How to install and use the plugin

1. In Joget, go to UI Builder. Under Marketplace section, drag the Apache Superset Userview Menu into the UI.

Figure 10: UI Builder


2. Fill in all the plugin configuration properties by referring to Apache Superset Userview Menu Properties.

3. For public dashboard, make sure you can see your dashboard in incognito mode (without logging into superset). Copy the URL.

Figure 11: Apache Superset Public Dashboard 


4. Paste the URL in the Dashboard URL for Public Dashboard Type.

Figure 12: Apache Superset Public Dashboard Configurations


5. Save and run in UI. You will be able to see the Apache Superset Public Dashboard.

Figure 13: Apache Superset Public Dashboard shown


6. For protected dashboards, you can use admin user for the Superset Username and Password if you want to save the hassle of creating a new user. If you wish to create a user with limited permissions, please refer to Configure Superset User Permissions.

Figure 14: Apache Superset Protected Dashboard Configurations


7. Obtain the dashboard embed ID after you have done the steps in Retrieve Superset Dashboard Embed ID

Figure 15: Apache Superset Protected Dashboard Embed ID


8. Paste the embed ID in Dashboard Embed ID. Save and run the UI.

Figure 16: Apache Superset Protected Dashboard Configurations Save


9. Save and run in UI. You will be able to see the Apache Superset Protected Dashboard.

Figure 17: Apache Superset Protected Dashboard shown



Apache Superset Userview Menu Properties

Configure Apache Superset Dashboard Menu

Figure 18: Plugin Configurations with no Dashboard Type


Figure 19: Plugin Configurations with Public Dashboard Type


Figure 20: Plugin Configurations with Protected Dashboard Type


Name

Description

Label

Menu label. Mandatory field.

Menu ID

Menu element unique ID. 

Dashboard Type

The type of dashboard that is shown to the user.

  • Public

  • Protected

Dashboard URL

This field is visible when "Dashboard Type" is public. Defines the entire URL of the dashboard. 

Example: http://localhost:8088/superset/dashboard/5/ (Assuming your Apache Superset is running on default http://localhost:8088/).

Apache Superset URL

This field is visible when "Dashboard Type" is protected. Defines the domain running Apache Superset.

Example: http://localhost:8088 (Assuming your Apache Superset is running on default http://localhost:8088/)

Superset Username

This field is visible when "Dashboard Type" is protected. Superset username used to create guest token. Refer to Configure Superset User Permissions. If you do not wish to create a new user, use the admin role.

Superset Password

This field is visible when "Dashboard Type" is protected. Superset user password used to create guest token.

Dashboard Embed ID

This field is visible when "Dashboard Type" is protected. Embed ID retrieved from Superset dashboard. Refer to Retrieve Superset Dashboard Embed ID.

Show Title

This option is visible when "Dashboard Type" is protected. Show or hide the title of the dashboard.

  • No

  • Yes

Show Tabs

This option is visible when "Dashboard Type" is protected. Show or hide the tabs of the dashboard.

  • No

  • Yes

Show Chart Controls

This option is visible when "Dashboard Type" is protected. Show or hide the chart controls of the dashboard.

  • No

  • Yes

Show Filters

This option is visible when "Dashboard Type" is protected. Show or hide the filter bar of the dashboard.

  • No

  • Yes



Apache Superset Dashboard Configurations

Please navigate to the domain where your superset is hosted, if you follow the documentation in Get Started -> Prerequisites / Assumptions, the default host location will be http://localhost:8088/.


Configure All Dashboard to be Public

  1. Settings > List Roles > Edit Record for "Public" role 

  2. Add Permissions:

    1. can read on chart

    2. can read on dataset

    3. can read on Dashboard

    4. can write on DashboardFilterStateRestApi
    5. can read on DashboardFilterStateRestApi

    6. can dashboard on Superset

    7. can explore json on Superset

    8. all datasource access on all_datasource_access

    9. all database access on all_database_access

       And any other permissions if required.


Figure 21: Edit Role for "Public"


Configure Specific Dashboard to be Public

  1. Settings > List Roles > Edit Record for "Public" role 
  2. Add Permissions:
    1. can read on chart
    2. can read on dataset
    3. can read on Dashboard
    4. can write on DashboardFilterStateRestApi
    5. can read on DashboardFilterStateRestApi
    6. can dashboard on Superset
    7. can explore json on Superset
    8. datasource access on [examples]
    9. database access on [examples]

       And any other permissions if required.

Figure 22: Permission "datasource access on [examples]"


Figure 23: Permission "database access on [examples]"



Configure Superset User Permissions

When "Dashboard Type" is protected, username and password is required. The user is required to generate guest token for end user to access the dashboard anonymously. The guest token that is generated follows the role configured in config.py for Superset (Figure 5). Note: the guest does not follow the role of the user configured in Apache Superset Userview Menu. The default role for guest is "Public".

To generate the least permission user to only be used to generate guest token, create a new user and role for it.

Create a new role (Figure 6):

  1. Settings > List Roles > Add a new record
  2. Add Permissions:
    1. can read on SecurityRestApi
    2. can grant guest token on SecurityRestApi

Create a new user (Figure 7):

  1. Settings > List Users > Add a new record 
  2. Link Role (Role created in Figure 6)


To read more on roles, refer to Apache Superset Documentation on roles: Apache Superset: Security > Provided Roles.


Figure 24: Default setting for Guest Role at Config.py for Superset


Figure 25: Add new role to generate guest token


Figure 26: Add new user to generate guest token



Retrieve Superset Dashboard Embed ID

  1. At superset/superset/config.py for Superset, enable "EMBEDDED_SUPERSET" to True.

  2. Dashboards > any dashboard > Settings > Embed dashboard

  3. Copy the embed ID 

Figure 27: Enable Embedded_Superset to True at Config.py for Superset


Figure 28: Embed dashboard option enabled after setting in Config.py


Figure 29: Embed ID in Embed dashboard



Customising Options for Superset Dashboard before Render

  • Show Title

  • Show Tabs

  • Show Chart Controls

  • Show Filters


Figure 30: Original dashboard without customisation


Figure 31: Show Title


Figure 32: Show Chart Controls



Disabling CSRF protection

  1. If you face any CSRF errors, at superset/superset/config.py for Superset, modify "WTF_CSRF_ENABLED" to False. This will disable all CSRF protection.


Figure 33: Disabling CSRF protection


Disabling Talisman

  1. If you still cannot load the Superset Dashboard in Joget, at superset/superset/config.py for Superset, try modifying "TALISMAN_ENABLED" to False. 


Figure 34: Disabling Talisman

Source Code and Plugin Download

  1. Please visit https://github.com/jogetoss/superset-menu for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/superset-menu/releases.
  3. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.


Related Links


  • No labels