Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
|Table of Contents|
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.
Plugins Available in the Bundle:
Apache Superset Userview Menu
This plugin bundle is compatible with Joget DX 8.
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
Before proceeding, make sure you have the following prerequisites:
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.
git clone https://github.com/apache/superset.git
Enter the "superset" folder
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.
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
Related to Mac Apple Silicon, refer to Docker startup on Apple Silicon · Issue #25434 · apache/superset (github.com)
If you want to clear everything and start afresh, use the following code to delete the container and the image. Also check if there are unused volumes, manually delete them from docker if necessary.
docker-compose down && docker image prune -a docker builder prune
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
Figure 6: Access is Denied
Try adding the permissions as shown in Configure All Dashboard to be Public.
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]
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.
Please refer to Source Code and Plugin Download.
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.
1. For public dashboard, please follow Configure All Dashboard to be Public or Configure Specific Dashboard to be Public to configure the Public role. Make sure you can see your dashboard in incognito mode (without logging into superset). Copy the URL.
Figure 11: Apache Superset Public Dashboard
2. Paste the URL in the Dashboard URL for Public Dashboard Type.
Figure 12: Apache Superset Public Dashboard Configurations
3. Save and run in UI. You will be able to see the Apache Superset Public Dashboard.
Figure 13: Apache Superset Public Dashboard shown
1. 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 Role.
Figure 14: Apache Superset Protected Dashboard Configurations
2. To use embed mode, make sure you refer to Configure Roles for Superset Dashboard Embedded Mode to have the necessary Guest Role permissions.
3. 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
4. Paste the embed ID in Dashboard Embed ID. Save and run the UI.
Figure 16: Apache Superset Protected Dashboard Configurations Save
5. Save and run in UI. You will be able to see the Apache Superset Protected Dashboard.
Figure 17: Apache Superset Protected Dashboard shown
Figure 18: Plugin Configurations with no Dashboard Type
Figure 19: Plugin Configurations with Public Dashboard Type
Figure 20: Plugin Configurations with Protected Dashboard Type
Menu label. Mandatory field.
Menu element unique ID.
The type of dashboard that is shown to the user.
This field is visible when "Dashboard Type" is public. Defines the entire URL of the dashboard.
Apache Superset URL
This field is visible when "Dashboard Type" is protected. Defines the domain running Apache Superset.
This field is visible when "Dashboard Type" is protected. Superset username used to create guest token. Refer to Configure Superset User Role. If you do not wish to create a new user, use the admin role.
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. When using this embedded mode, please refer to Configure Roles for Superset Dashboard Embedded Mode to make sure you have the necessary roles to enable embedded mode.
This option is visible when "Dashboard Type" is protected. Show or hide the title of the dashboard.
This option is visible when "Dashboard Type" is protected. Show or hide the tabs of the dashboard.
Show Chart Controls
This option is visible when "Dashboard Type" is protected. Show or hide the chart controls of the dashboard.
This option is visible when "Dashboard Type" is protected. Show or hide the filter bar of the dashboard.
Settings > List Roles > Edit Record for "Public" role
And any other permissions if required.
Figure 21: Edit Role for "Public"
And any other permissions if required.
Figure 22: Permission "datasource access on [examples]"
Figure 23: Permission "database access on [examples]"
When "Dashboard Type" is protected, username and password is required. The user that is logged in needs to have the following roles: "can read on SecurityRestApi" and "can grant guest token on SecurityRestApi".
Create a new role (Figure 24):
Create a new user (Figure 25):
To read more on roles, refer to Apache Superset Documentation on roles: Apache Superset: Security > Provided Roles.
Figure 24: Add new role to generate guest token
Figure 25: Add new user to generate guest token
When "Dashboard Type" is protected, we will need to use embedded mode to embed the dashboard. Under Embedded config options in superset/superset/config.py, the GUEST_ROLE_NAME rolemust have the following permissions configured:
You can create a new role for this if you do not wish to use "Public" role. Refer to Figure 27 and Figure 28 for this.
Figure 26: Default setting for Guest Role at Config.py for Superset
Figure 27: New "EmbedRole" created with necessary permissions
Figure 28: EmbedRole as the new Guest Role at Config.py for Superset
At superset/superset/config.py for Superset, enable "EMBEDDED_SUPERSET" to True.
Dashboards > any dashboard > Settings > Embed dashboard
Copy the embed ID
Figure 29: Enable Embedded_Superset to True at Config.py for Superset
Figure 30: Embed dashboard option enabled after setting in Config.py
Figure 31: Embed ID in Embed dashboard
Show Chart Controls
Figure 32: Original dashboard without customisation
Figure 33: Show Title
Figure 34: Show Chart Controls
Figure 35: Disabling CSRF protection
Figure 36: Disabling Talisman