dosubot[bot] commented on issue #30402:
URL: https://github.com/apache/superset/issues/30402#issuecomment-2376610565
<!-- Greeting -->
Hey @Prachil-MI, I'm here to help with any bugs, questions, or contributions
you have for Superset! Let's tackle this issue together and get it sorted out. 🤖
<!-- Answer -->
I found a similar solved discussion and several closed issues that might
help you resolve the problem where the Superset dashboard gets stuck on the
Loader logo when embedded into an Angular application using the Public role.
1. **Similar Discussion:**
- [Embedded Dashboards don't load
consistently](https://github.com/apache/superset/discussions/28049#discussioncomment-9127795)
(last updated on April 16, 2024). The issue was related to the load balancer
on AWS and not Superset itself
<sup>[[1]](https://github.com/apache/superset/discussions/28049)</sup>.
2. **Closed Issues:**
- [Dashboard shows endless
loading](https://github.com/apache/superset/issues/20748) (last updated on June
04, 2024). The issue was related to the "Select first filter item" feature.
Removing this feature fixed the problem temporarily
<sup>[[2]](https://github.com/apache/superset/issues/20748)</sup>.
- [Dashboard embedded issue in standalone mode with
2.1.0](https://github.com/apache/superset/issues/24199) (last updated on March
06, 2024) <sup>[[3]](https://github.com/apache/superset/issues/24199)</sup>.
- [Error fullscreen embedded
dashboard](https://github.com/apache/superset/issues/22537) (last updated on
January 11, 2024). This issue was closed by a pull request that hid the
fullscreen option for embedded contexts
<sup>[[4]](https://github.com/apache/superset/issues/22537)</sup>.
To resolve the issue, ensure that the guest token is being fetched and sent
correctly to the iframe. Here is a code snippet that shows how to embed a
Superset dashboard and handle guest tokens:
```ts
const [guestToken, ourPort]: [string, Switchboard] = await Promise.all([
fetchGuestToken(),
mountIframe(),
]);
ourPort.emit('guestToken', { guestToken });
log('sent guest token');
async function refreshGuestToken() {
const newGuestToken = await fetchGuestToken();
ourPort.emit('guestToken', { guestToken: newGuestToken });
setTimeout(refreshGuestToken, getGuestTokenRefreshTiming(newGuestToken));
}
setTimeout(refreshGuestToken, getGuestTokenRefreshTiming(guestToken));
```
Ensure that:
1. The `fetchGuestToken` function is correctly implemented and returns a
valid guest token.
2. The guest token is being emitted to the iframe using
`ourPort.emit('guestToken', { guestToken })`.
Additionally, ensure that the embedded page is correctly set up to handle
the guest token. The following code from
`superset-frontend/src/embedded/index.tsx` shows how the guest token is
processed:
```tsx
function setupGuestClient(guestToken: string) {
setupClient({
guestToken,
guestTokenHeaderName: bootstrapData.config?.GUEST_TOKEN_HEADER_NAME,
unauthorizedHandler: guestUnauthorizedHandler,
});
}
window.addEventListener('message', function embeddedPageInitializer(event) {
try {
validateMessageEvent(event);
} catch (err) {
log('ignoring message unrelated to embedded comms', err, event);
return;
}
const port = event.ports?.[0];
if (event.data.handshake === 'port transfer' && port) {
log('message port received', event);
Switchboard.init({
port,
name: 'superset',
debug: debugMode,
});
let started = false;
Switchboard.defineMethod(
'guestToken',
({ guestToken }: { guestToken: string }) => {
setupGuestClient(guestToken);
if (!started) {
start();
started = true;
}
},
);
Switchboard.start();
}
});
```
You can also use the Superset Embedded SDK to simplify the embedding process:
```js
import { embedDashboard } from "@superset-ui/embedded-sdk";
embedDashboard({
id: "abc123", // given by the Superset embedding UI
supersetDomain: "https://superset.example.com";,
mountPoint: document.getElementById("my-superset-container"), // any html
element that can contain an iframe
fetchGuestToken: () => fetchGuestTokenFromBackend(),
dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab,
hideChartControls, filters.visible, filters.expanded (optional), urlParams
(optional)
hideTitle: true,
filters: {
expanded: true,
},
urlParams: {
foo: 'value1',
bar: 'value2',
// ...
}
},
// optional additional iframe sandbox attributes
iframeSandboxExtras: ['allow-top-navigation',
'allow-popups-to-escape-sandbox']
});
```
Ensure that your backend correctly creates and provides the guest token by
making a `POST` request to `/security/guest_token` with the necessary
parameters
<sup>[[5]](https://github.com/apache/superset/blob/master/superset-embedded-sdk/src/index.ts)</sup><sup>[[6]](https://github.com/apache/superset/blob/master/superset-frontend/src/embedded/index.tsx)</sup><sup>[[7]](https://github.com/apache/superset/blob/master/superset-embedded-sdk/README.md)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
