Grafana 7 Arrives with Percona Monitoring and Management 2.10.0
As you may know, Percona Monitoring and Management (PMM) is based on Grafana, and all our frontend applications are either Grafana plugins or dashboards.
We’ve just released PMM version 2.10 and it includes a lot of improvements and new functionality. In this article, I would like to highlight some. They are quite important for users and developers despite this being just a version update.
The biggest change is the upgrade to a major new release of Grafana. Why is this important? Because we have a lot of interaction with the underlying mechanisms of Grafana. Consequently, we’ve made a lot of changes related to styling, platform core, and infrastructure. A downside of this is that sometimes changes are incompatible with previously used functionality, and we need to follow and mitigate these.
Consistent UI
Some time ago, Grafana switched to developing its own library for components on the frontend. In the 7th version, they made an updated UI kit. This brought a more complete look and feel, and overall, the interface is much neater, better looking, and more universal. Along with the transition to the 7th version, we also started using new UI kit interface elements in many places. The interface has become noticeably more consistent and holistic and presents a lighter and cleaner style.
Better React Support
Grafana has simultaneously been developing with Angular and, more lately, ReactJS, and for some time have been supporting both. In version 7 a turning point has come and support for development on ReactJS has come to the fore. We have long since switched to using ReactJS, so these changes were very useful for us.
What this means for PMM: With better support for ReactJS plugins, we can develop faster and remove some workarounds.
API Changes
Significant changes were made to how plugins interact with Grafana. Many of the methods that allowed us to interact with low-level functions seem to be gone. For example, there is no longer the ability to redefine or add your own listeners to Grafana core events, such as time range changes.
As we used such functionality for different purposes, we were faced with some complications:
- In QAN we have filters that need to be stored as Grafana variables and be synchronized with panel states.
- We have complex interactions with the time range and refresh controls.
- Many other things, such as open tabs in details, added columns, and so on. All these are part of the URL. This data must be stored somewhere because it is occasionally needed in other dashboards.
Use Grafana Themes
In conjunction with this update, we converted almost every part of PMM to using the Grafana themes factory. Of course, there is still some old CSS code, but the conversion work is ongoing and will be finished soon.
The Grafana themes factory approach gives us an easier way to manage styles and make interfaces more consistent, which corresponds more closely to how Grafana itself works.
Stability Improvements
Grafana is running a mix of Angular and ReactJS, and in recent years there has been a migration to pure ReactJS. Now, the majority of Grafana system components are implemented with ReactJS. A lot of legacy code has been cleaned up, reducing the number of errors and made the work easier.
Infrastructure Enhancements
We use the grafana-toolkit to build the front-end of PMM. As we use it within a CI process, it is crucially important that it works as quickly and smoothly as possible. Grafana version 7 also brought these advantages:
- Improved typescript support
- Faster build time
- Fewer bugs
Also, learn more about the new Percona Customer Portal rolling out starting with the 2.10.0 release of Percona Monitoring and Management.
by Roman Misyurin via Percona Database Performance Blog
Comments
Post a Comment