Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

react dashboard embeded doesnt update after token refresh #20836 #4

Open
2 of 3 tasks
VictorEffectiv opened this issue Jul 23, 2022 · 1 comment
Open
2 of 3 tasks

react dashboard embeded doesnt update after token refresh #20836 #4

VictorEffectiv opened this issue Jul 23, 2022 · 1 comment

Comments

@VictorEffectiv
Copy link

A clear and concise description of what the bug is.

How to reproduce the bug

  1. Create a React App
  2. Try to embed a dashboard using the sdk
  3. Wait for 5 min and see that after token refresh call, the dashboard doesnt update

Expected results

i would expect to see the message dashboard updated

Actual results

nothing happens. i see that the refetch token function is called but nothing else is triggered

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

(please complete the following information):

  • browser type and version:
  • superset version: superset version
  • python version: python --version
  • node.js version: node -v
  • any feature flags active:

Checklist

Make sure to follow these steps before submitting your issue - thank you!

  • I have checked the superset logs for python stacktraces and included it here as text if there are any.
  • I have reproduced the issue with at least the latest released version of superset.
  • I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

i was able to make the dashboard refresh with a simple html and the following code

<!DOCTYPE html>
<html>
  <head>
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="default-src https: 'unsafe-eval' 'unsafe-inline':"
    /> -->
  </head>
  <body>
    <h1>Superset Embedding</h1>

    <p>First Dashboard Embedding</p>
    <style type="text/css">
      #my-superset-container {
        height: 100vh;
        width: 100vw;
      }
      #my-superset-container > iframe {
        height: 100%;
        width: 100%;
      }
    </style>

    <script src="https://unpkg.com/@preset-sdk/embedded"></script>

    <script type="text/javascript">
      async function fetchGuestTokenFromBackend() {
        let url = "url;
        const settings = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",,
          },
          body: JSON.stringify(
        try {
          let response = await fetch(url, settings);
          let data = await response.json();
          console.log("data is", data);
        } catch (e) {
          console.error(e);
        }
      }
    </script>

    <div id="my-superset-container"></div>

    <script>
      presetSdk.embedDashboard({
        id: "id", // given by the Superset embedding UI
        supersetDomain: "iddomain",
        mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
        fetchGuestToken: fetchGuestTokenFromBackend,
        debug: true,
        dashboardUiConfig: { hideTitle: false }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
      });
    </script>
  </body>
</html>

At first i thought it was CRA that was doing something wrong, but i copy pasted the same code as above inside my index.html from the CRA app and it worked fine.

When i try to embed using normal React code for some reason the dashboard t never gets refreshed after the fetchToken happens.

This is my relative React code

  useEffect(() => {
    if (iframeRef.current && data?.dashboardVizV2IDs && selectedTab) {
      const tab = data?.dashboardVizV2IDs.find((el) => el.id === selectedTab);

      if (tab) {
        embedDashboard({
          id: tab.biId, // given by the Superset embedding UI
          supersetDomain: tab.meta.superset_domain,
          mountPoint: iframeRef.current, // any html element that can contain an iframe
          fetchGuestToken: async () => {
            const result = await getDashboardToken({
              id: tab.id,
              useCase: id,
              category: type,
            });
            return result.data.dashboardVizV2EmbeddingToken.token;
          },
          debug: true,
          dashboardUiConfig: { hideTitle: true, hideChartControls: false }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
        });
      }
    }
  }, [data?.dashboardVizV2IDs, getDashboardToken, id, selectedTab, type]);
@NodeJSmith
Copy link

@VictorEffectiv Did you ever solve this? If not, does this address the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@NodeJSmith @VictorEffectiv