Further customizing a Grafana Custom Plugin in React

In my previous blog I created a custom plugin for Grafana with React and more specifically the Material UI TreeView.
It’s possible to customize the plugin even further, as I will show you in this post.

CSS

Styling can be added when needed. Keep in mind that Grafana uses a theme, that can be switched between dark and light. They also offer Grafana styleclasses, that help you create a style that works with the Grafana themes.

For now I’ll just change the color to grey, so the tree is visible in both themes.

CSS can be added to the Grafana plugin by adding a CSS-file to your project/module. But be sure to import it in your component. Grafana will not pick up it otherwise.

Panel Editor

With most standard plugins the Grafana user can adjust certain plugin settings in the panel editor screen.
Such an editor screen can be created for a custom plugin. For this example I would like to add a title to the tree, that the user can change.

When creating a custom Panel Editor Grafana offers @grafana/ui-elements to create certain (form)elements.

1. Create a new class that will render the editor screen.
2. Add an input for the title, for this the @grafana/ui-elements PanelGroupOptions and FormField can be used.
3. Pass the class to the setEditor-function, which needs to be called on the panel after initializing the PanelPlugin and setting a default for it in your panel .tsx-file.

Dashboard Variable

Dashboard variables are global variables in Grafana that can be accessed by all panels included on the dashboard.

The dashboard variables are shared in and read from the URL-parameter. In this example testVar is the name I gave my global variable in the dashboard.

The custom plugin can easily access the variables, as they can be read from the URL.

Using and reading the global variable in your custom plugin is easily done and works great.

When it is updated outside of the custom plugin, then it will update in your plugin automatically.

Now let’s say you want to click on an item in the tree and see details related to that selected item in other panels of the dashboard. For that to happen, it should be possible to set the dashboard variable from the custom plugin.

Grafana offers no interface for manipulating the variable from the custom plugin. There have been proposed solutions for the AngularJS custom plugin, accessing the variableSrv in the constructor (although that doesn’t seem to trigger a requery in other panels).

The only “fix” I’ve found for the React plugin sets the URL parameter and then does a hard refresh (through page reload), which results in terrible user experience. So let’s not do that.

This post shows you a few customizing options for your Grafana custom plugin. My main takeaway of creating this plugin is that a lot is possible and quick to get up and running. However it would be nice to be able to set the dashboard variable, this could benefit the usability of the custom plugin. And help create a dashboard with multiple custom plugins that not just respond to the global variable, but to each other.