Plugin tutorial not working

Grafana Plugin Development
1

Hello,

Followed the tutorial on building a plugin. Using Grafana 7.1.
The plugin was compiled without issues, Grafana logs no errors and discovers the plugin.

However, when I add try to open the plugin in a panel, the code renders as text.

image
image979×569 91.4 KB

What am I missing?

2

Thanks for letting us know. Don’t worry though. Your plugin is working just fine. The weird code you see if because Grafana isn’t able to render the README correctly. I’ll make sure to update the starter template!

3

Thanks for your help. Is it normal that it defaults to rendering the README.md? It seems this is not a plugin based config but Grafana tries to load the README when the plugin is loaded?
For some reason my exported component (example circle) is not being rendered.
I can console.log within SimplePanel.tsx but nothing is being rendered.

4

Just saw this as well. I think it may be beneficial in the tutorial to add how add the plugin to a dashboard. It took me a second to realize the plugin was just in the visualization section of a new panel. But I can confirm nothing but the readme is broken with this.

5

As @invadersquibs pointed out, you need to add the plugin to a dashboard by creating a panel and selecting it from the Visualization section in the panel editor.

I believe it’s described in the tutorial already (Step 5):

Next, you’ll learn the basic workflow of making a change to your panel, building it, and reloading Grafana to reflect the changes you made.

First, you need to add your panel to a dashboard:

  1. Open Grafana in your browser.
  2. Create a new dashboard, and add a new panel.
  3. Select your panel from the list of visualization types.
  4. Save the dashboard.

Now that you can view your panel, try making a change to the panel plugin:

Is there anything we can do to make this clearer?

6

No when I see it there it is super clear. I’m not sure why i missed that tbh.

1 Like