Embedding Grafana into a Web App

My co-workers and I have built a full-stack web application with next.js, flask, postgres, and Grafana. Why do we need Grafana? We use it for specific visualizations that are hard to generalize in our main stack. It allows for customizable and version controllable dashboards that look great and can be embedded into web applications. This gives us the ability to add dynamic visualizations with ease.

In our next.js application, a server side JavaScript and React framework, we use its native page system. In a main page we embed a Grafana dashboard using a simple iframe html tag and a few state defined variables in order to create a meaningful url. Below is a snippet of how we use the tag:

The line,

${darkMode ? 'dark' : 'light'}

uses our darkMode state, taken from our React global state management context, which allows us to easily match the Grafana theme with ours!

This of course assumes a Grafana server is running. If it is not, feel free to take a look my previous article, Easy Grafana and Docker-Compose Setup. We map the server url to the GRAFANA_DASHBOARD_URL variable so we can embed it in the iframe. This variable is easily passed into the system using a next.js runtime config file, next.config.js. An example of the configuration file and how it is used within a .js file is shown below.

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
const { GRAFANA_DASHBOARD_URL } = publicRuntimeConfig;

We updated the configuration file in order to allow embedding so we do not get a deny error. This is easily done by updating the servers configuration and restarting it. The key setting below in order to do this is the allow_embedding config.

And that is it!