Is there anyway to embed 3rd party page (eg: kibana’s visualize) in superset dashboard?

[poweronlevel]

I have made some visualizes in kibana , and would like to integrate these kibana visualizes into superset.
does superset support embedding third party pages by way of iframes?

[dosubot[bot]]

Hey @poweronlevel! I'm here to help you with any questions or issues you have. Feel free to ask me anything!

Yes, you can embed third-party pages, such as Kibana's visualizations, in a Superset dashboard using iframes. Here is an example of how you can embed a third-party page using an iframe:

async function embedThirdPartyPage({
  url,
  mountPoint,
  iframeTitle = "Embedded Page",
  iframeSandboxExtras = []
}: {
  url: string,
  mountPoint: HTMLElement,
  iframeTitle?: string,
  iframeSandboxExtras?: string[]
}): Promise<void> {
  const iframe = document.createElement('iframe');

  // set up the iframe's sandbox configuration
  iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work
  iframe.sandbox.add("allow-scripts"); // obviously the iframe needs scripts
  iframe.sandbox.add("allow-presentation"); // for fullscreen charts
  iframe.sandbox.add("allow-downloads"); // for downloading charts as image
  iframe.sandbox.add("allow-forms"); // for forms to submit
  iframe.sandbox.add("allow-popups"); // for exporting charts as csv
  // additional sandbox props
  iframeSandboxExtras.forEach((key: string) => {
    iframe.sandbox.add(key);
  });

  iframe.src = url;
  iframe.title = iframeTitle;
  //@ts-ignore
  mountPoint.replaceChildren(iframe);
  console.log('placed the iframe');
}

// Usage example
embedThirdPartyPage({
  url: 'https://kibana.example.com/visualization',
  mountPoint: document.getElementById('iframe-container')
});

This code sets up an iframe with the necessary sandbox attributes and embeds the specified URL into the provided HTML element. You can replace the url parameter with the URL of the third-party page you want to embed ^[1][2].

To continue talking to Dosu, mention @dosu.

[poweronlevel]

Thanks for the answer, where do I put this code?
Does this one require me to do a secondary development of superset? If this is the only way to do it, how do I quickly get up to speed with secondary development and release and deploy it?

[dosubot[bot]]

To integrate your code into the Superset project, you will need to set up a development environment. This does require secondary development of Superset. Here are the steps to get up to speed with secondary development, release, and deployment of Superset:

1. Fork and Clone the Repository:

   git clone git@github.com:your-username/superset.git
   cd superset

2. Set Up the Development Environment Using Docker Compose (Recommended):

   docker-compose up

3. Run the Flask Development Server:

   superset run -p 8088 --with-threads --reload --debugger --debug

4. Install via Makefile (Optional):

   # Create a virtual environment and activate it (recommended)
   python3 -m venv venv
   source venv/bin/activate
   
   # Install pip packages + pre-commit
   make install
   
   # Install superset pip packages and setup env only
   make superset
   
   # Setup pre-commit only
   make pre-commit

5. Update Dependencies (If Needed):

   python3 -m venv venv
   source venv/bin/activate
   python3 -m pip install -r requirements/development.txt
   pip-compile-multi --no-upgrade

6. Run Frontend Development Server:

   npm run dev-server -- --env=--superset=https://superset-dev.example.com

7. Run Tests:

   • Python Tests:

     tox -e py38

   • Frontend Tests:

     cd superset-frontend
     npm run test

8. Debugging:

   • Local Debugging with VSCode:

     {
       "version": "0.2.0",
       "configurations": [
         {
           "name": "Python: Flask",
           "type": "python",
           "request": "launch",
           "module": "flask",
           "env": {
             "FLASK_APP": "superset",
             "SUPERSET_ENV": "development"
           },
           "args": ["run", "-p 8088", "--with-threads", "--reload", "--debugger"],
           "jinja": true,
           "justMyCode": true
         }
       ]
     }

For more detailed instructions, refer to the Superset documentation and the Contributor Guide. These resources will help you set up your development environment, make changes, and test them effectively ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[eschutho]

Hi, you should be able to add an iframe as a markdown chart type in your dashboard.

[poweronlevel]

Firstly, thank you very much for the advice you've given.
How exactly does Markdown work?
I added layout elements to the dashboard, and then wrote the following, but it didn't actually work.

After editing and previewing, as shown in the figure below, the content of the iframe is not displayed.
The src of this iframe is actually a normal blog address that anyone can open and browse.