Purpose

This article explains how to display/embed the Grafana Dashboard on a Confluence Page.

Environment

Confluence Data Center

Solution

• The Grafana Dashboards can be embedded into a Confluence page using an iFrame HTML element via Confluence HTML Macro.
• The iFrame HTML element is used to insert content from another source on a webpage and similarly, can be used to source data from Grafana to display dashboards in Confluence.

Prerequisite 

For this integration to work, the Grafana application should be configured to support iFrames as some sites don't work in an iframe and have cross-scripting protection in their headers. 

x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

If the above headers (or similar) are present in the response from the Grafana Dashboard URL, then you will not be able to display them in an iframe.

Steps

The below steps can be followed to add an iFrame element using the Confluence HTML Macro to display the Grafana Dashboard on a Confluence page :

1. Log in as Confluence Administrator.
2. Go to Manage Apps at  > Manage Apps
3. Search for "Confluence HTML Macros" with "All apps" selected in the dropdown
4. Under "System apps", click on "Confluence HTML Macros" to expand the app details
5. Expand the modules in the far-right column
6. Enable the module called "html (html-xhtml)"
   
7. The HTML macro is now available. When creating or editing a page, insert the "HTML" macro:
   1. Go to + (Insert more content) > Other macros
      

   2. Search for the HTML macro
      

      
      

   3. Paste the following code inside the macro, adding the URL of the Grafana Dashboard in src that needs to be dispalyed on the Confluence page. Modify the other parameters as required.

      <iframe src="Grafana Dashboard URL" noborder="0" width="830" height="800" scrolling="yes" seamless></iframe>

8. Save the page

Note - The Grafana Dashboards embedded on the Confluence page using an iFrame element will be refreshed every time the page refreshes during the page load.