Grafana 7 Arrives with Percona Monitoring and Management

Grafana 7 Arrives with Percona Monitoring and Management

Grafana 7 Arrives with Percona Monitoring and ManagementAs 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
  • 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

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:

  1. Improved typescript support
  2. Faster build time
  3. Fewer bugs

Download PMM 2.10.0 Today!

Also, learn more about the new
Percona Customer Portal
rolling out starting with the 2.10.0
release of Percona Monitoring and Management.