Skip to main content

Build a panel plugin

We are not here to lecture you on the basics of programming. If you are already looking to build a plugin for Grafana, you most likely know a thing or two about software development.

We thought that the "follow-me, step-by-step tutorial" format, where Daria demonstrates the steps, might be the fastest to get you up to speed.

To this day, we have created three parts of the tutorial. If you like our format, please indicate that by liking the videos on YouTube and leaving a comment.

Part 1​

Lean back on your chair and watch how Daria creates a panel plugin for Grafana.

Alternatively, follow every step and in the end have your first-ever panel plugin created and provisioned with configured version control!

In this part, Daria walks you through the following 10 steps:

  • Step 1. Prerequisites.
  • Step 2. Scaffolding.
  • Step 3. VS Code.
  • Step 4. Install dependencies.
  • Step 5. Build a plugin.
  • Step 6. Start Grafana instance.
  • Step 7. Login into Grafana UI.
  • Step 8. Create a dashboard.
  • Step 9. Provisioning.
  • Step 10. Rebuild the Grafana container.
Part 1. Build a panel plugin tutorial for Grafana.

Part 2​

Daria walks you through the following 10 steps:

  • Step 11. Version Control.
  • Step 12. Update Grafana Version.
  • Step 13. Update Dependencies.
  • Step 14. GitHub Commit.
  • Step 15. Plugin.json file.
  • Step 16. Plugin Options and Types.
  • Step 17. Update component.
  • Step 18. Commit to GitHub.
  • Step 19. Update Styles.
  • Step 20. Add Data Source.
Part 2. Build a panel plugin tutorial for Grafana.

Part 3​

This part is a heavy-loaded one with insights and guidance. Daria covers the unit and end-to-end tests, demonstrates how GitHub actions work, and walks you through the plugin signing process with further submission for review.

  • Step 21. Unit tests and GitHub Continuous Integration.
  • Step 22. End-to-end tests.
  • Step 23. Signing a plugin.
  • Step 24. Release Workflow.
  • Step 25. Submit Plugin for Review.
  • Step 26. Change a private plugin to a community plugin.
Part 3. Build a panel plugin tutorial for Grafana.

Here are some highlights of the video.

Unit tests​

Some developers praise unit tests, others consider them worthless.
Some developers praise unit tests, others consider them worthless.

We use Unit tests in our projects and strive to achieve a least 90% of coverage.

Grafana tools provide two ready-to-use test scripts. One is called test and the other one is test:ci.

The two schemas below highlight the difference.

Conceptual View of the Test Script.
Conceptual View of the Test Script.
Conceptual View of Test CI (Continuous Integration) script.
Conceptual View of Test CI (Continuous Integration) script.

End-to-end (E2E) tests​

End-to-end tests offer to QA your application as if it is done by a human. There are a lot of challenges and false positive alarms, yet, we consider E2E to be helpful and recommend utilizing them for your plugin development needs.

How I explain E2E to my 6-year-old.
How I explain E2E to my 6-year-old.