Grafana dashboards are now powered by Scenes: big changes, same UI

Though you might not immediately notice it the next time you log in, Grafana’s frontend has undergone a major upgrade. We recently migrated our dashboard architecture to utilize the Grafana Scenes library, enabling the creation of more stable, dynamic, and flexible Scenes-powered dashboards.

Yes, the UI is pretty much the same, but under the hood, the engine responsible for visualizing the dashboards used by millions of people around the world has largely been rewritten. In this post, I’ll explain why we made this change, how this new architecture works, and how it helps everyone (us and you!) get more out of dashboards. Plus, we’ll talk about the new possibilities this migration will open up in the future.

Why we migrated to Scenes to power Grafana dashboards

Anyone who has gone through a migration knows they’re often challenging and costly. So why did we decide to do one?

Well, the Grafana project had 10 years under its belt! A decade of code would represent a lot of change for any organization, but it’s especially challenging with an open source project. Behind the scenes, we had to navigate webs of complexity in critical components, and there were lots of great feature requests we received over the years that we simply couldn’t implement.

For instance, we would hear requests from people who create and edit dashboards like:

• Can we support multiple different time ranges on a dashboard?
• What about multiple different sets of nested variable scopes, such as variables on row and panel levels that depend on variables defined on a higher level?
• Can we create groups and hierarchies for panels and rows? Can we arrange panels into tabs?
• What about displaying annotations for just one row or panel?

And our answers were always something like:

“We could… but hacking things to make those features would impact the stability of the product, which means more bugs in the long run for you and increased degradation in user experience :(”

Of course, we knew this wasn’t a great answer, and we needed to come up with a solution.

The journey of the Grafana Scenes library

At first, we wanted to burn it all down and start over again! But that wasn’t going to work because, as Tesler’s Law states, complexity can’t be removed—it can only be moved around.

So, we created the Grafana Scenes library to move the complexity of the engine that visualizes dashboards somewhere else. In essence, Scenes is a frontend library that provides an intuitive, declarative API that allows developers to build dynamic dashboarding experiences. (You can read more about Scenes in this blog about the library becoming generally available.)

The Scenes library was also born to serve two main user groups:

• Plugin developers, who build dashboard-like experiences (applications) and don’t need deep knowledge of Grafana
• Grafana dashboard developers, who manage the core dashboard visualization engine.

The following timeline describes the Scenes library’s journey:

How we migrated the Grafana core dashboards to utilize Scenes

At the start of the migration project in January 2023, we agreed that the best way to fully benefit from the Scenes library was to replace the core dashboard code completely, creating a new dashboard runtime built on Scenes.

We went into the project with these guideposts:

• Reuse what works: Although our goal was to replace the core dashboard code, we recognized that some UI components could be reused. This approach helped us save time and avoid reinventing features that already functioned well—for example, UI components that managed annotation settings, variable settings, all data source query editors, and similar functions.
• Lean on Scenes for core features: Since Scenes already handles essentials like templating, querying, data transformation, layout, and rendering, we focused on integrating these rather than starting from scratch.
• Feature parity first: Our top priority was ensuring the new dashboard completely matched the functionality of the old one before we went ahead with any fancy upgrades. Minor UI improvements were OK as long as they didn’t slow us down.

Migration stages

Feature parity stage

With feature parity as our guiding star, we kept the old and new architectures running in parallel using feature toggles (dashboardScene and dashboardSceneForViewers). By May 3 of this year, our team—10 engineers, an engineering manager, a technical writer, and a product owner—had hit this milestone, allowing us to launch the new dashboardScene as a public preview in Grafana version 11.

Phased rollout stage with rolling release channels

To bring dashboardScene to cloud users, we followed Grafana Labs’ rolling release strategy, which essentially looks like this:

• We started by bringing the migration to tests and canary instances.
• After no more issues were found, we began to roll out dashboardScene incrementally across production instances by channels (fast, instant, steady).

Of course, as you can imagine, this phase was challenging for the team. Our day-to-day workflow looked something like this:

• Wake up and get caffeinated. ☕
• Check user feedback, bug reports, and escalate issues (try not to cry).
• Triage and prioritize fixes based on urgency (full teamwork).
• Fix bugs, investigate quirks, and report blockers. (try to feel hopeful)
• Rinse, sleep, repeat.

By October, after five months of doing this, we had rolled out dashboardScene to 85% of Grafana Cloud users, marking the migration ready for our on-prem users.

Then, on October 22, with the release of Grafana v11.3.0 ( both OSS and Enterprise), we made several features previously hidden behind toggles generally available (GA) for our on-prem users. These feature toggles include, in no particular order: dashboardSceneForViewers, dashboardScene, dashboardSceneSolo, and publicDashboardsScene.

How the migration will help us—and what it means for you

As I mentioned previously, this new framework comes with lots of benefits. First, let’s walk through how this migration will affect you, our users.

New framework, same UI

At first glance, Grafana users won’t notice much impact at all from this migration. And that’s a good thing! Consistency is one of the key principles of good re-architecting, and we made sure that the new dashboard experience essentially felt the same as the old one.

That said, we have made some small UI improvements, including:

• Edit mode: When editing a dashboard, users will see a new Edit button in the toolbar. We noticed it was sometimes hard to efficiently navigate through all the visual options during the dashboard editing process, but with Edit mode we’re providing an easier way to discover and interact with the dashboard editing experience.
• Fixed positioning of template variables and time picker: We moved the time picker into the dashboard canvas and now, together with template variables, it will stick to the top as you scroll through your dashboard. This has historically been a highly requested feature that we’re happy to finally roll out for the community.

But overall, Scenes-powered dashboards will look a lot like the old dashboards. So don’t worry, the same Grafana you know will continue to operate the way you expect. And if you’re curious about how a dashboard will look in this new setup, you can test it out yourself in Grafana Play. Click here to see the old architecture, and then go here to see the new one.

Last but not least, the “Services loading” screen that our users frequently saw when loading a dashboard has been removed. Now users will see the dashboards quickly because our variables are run in the background.

Are there more enhancements post-migration? Oh yes!

There are some additional user benefits that have come from this migration as well. For example, Grafana Enterprise customers will notice some huge improvements in PDF exports thanks to a new architecture for PDF generation:

• Small dashboards (4 panels): Generation time was reduced from 11.87s to 7.07s
• Medium dashboards (11 panels): Generation time was reduced from 25s to 6.3s
• Large dashboards (200 panels): Generation time was reduced from 7.5min to 11s

This refactor also resolved issues with rendering reports containing repeated panels or rows. If you want to try it out, enable the newPDFRendering feature toggle together with the dashboardScene toggle.

Other enhancements and bug fixes include:

• A new URL timezone parameter lets users set the dashboard time zone using a Grafana URL.
• Kiosk mode now supports showing template variables and dashboard controls by default; however, users can configure them to be hidden.
• Added support for the All option in repeating panels.
• Fixed an issue where users couldn’t add an existing dashboard to the General folder.
• Fixed issues with repeated panels’ positioning in dashboards.
• Fixed missing Unsaved changes dialog when clicking on Explore from a new dashboard.

Current known limitations

The main limitation that we’re currently aware of is that the manage and inspect variables are not yet available. We’ll be working on better understanding how this feature was used and how to best implement it in our new architecture.

Better workflows are helping us, the maintainers of the dashboard engine

When we switched to this new dashboardScene architecture, we noticed several ways it would benefit us internally:

• First, the Scenes library manages the new dashboard architecture like a tree, allowing quick access to different parts—visualizations, variables, queries, and time ranges—without depending on the visual components being displayed.
• Because the state is no longer tied to the components, we could preserve data between different components. This meant we could avoid queries being re-run when React components are unmounted.
• We could reuse all our existing visualizations without having to rewrite anything when migrating the dashboard to use Scenes.
• While working with this migration, we saw our internal engineering culture changing. We established better testing practices, gained knowledge of features that in the past few people knew about, and gained resilience and expertise in migrations

Ultimately, this helps us bring more value to our users, as it gives us the ability to implement things quickly and efficiently in the future.

A quick look at the new architecture

I won’t go too deep into the technical details of the Scenes library itself, which you can learn more about here. Instead, I want to briefly illustrate, in simple terms, how the Scenes library is being used in dashboards, the core element of Grafana, from a coding perspective.

Old and new architecture: The dashboard JSON is still the source of truth

The source of truth for Grafana dashboards has always been a dashboard JSON. These files include the representation of panels, template variables, time ranges, and anything that can describe how a dashboard should look.

With the old architecture:

• We took that dashboard JSON.
• Created an instance called the DashboardModel.
• And then, using React, we rendered the dashboard. To keep that dashboard updated, we listened to user and data events and reacted to them.

In the new architecture, the dashboard JSON remains our source of truth, and the only difference is the mechanism used to render the dashboard:

• We take the dashboard JSON.
• Transform the JSON to create a dashboardScene object. The object is a tree where nodes represent the different aspects of a dashboard—visualizations, data, variables, and time range.
• Then, with the Scenes library, we render the dashboard. Here the library handles all the logic for keeping the dashboard updated.

What’s possible post-migration?

While our main focus was on feature parity and stability to make the new architecture available by default, the migration of the dashboard to utilize the Scenes library opens up numerous possibilities that we’ve been eager to explore going forward. While nothing is officially on our roadmap just yet, there have been lots of discussions related to dashboards at scale. For instance, we want to:

• Offer the possibility of structuring dashboards more efficiently with the use of tabs.

  • We’ve heard you asking for the ability to visualize information in different contexts or to address different audiences, and we think tabs could help accomplish this.

• Bring in interactive metrics comparison as part of your daily workflows.

  • We want you to be able to compare metrics between different time frames or compare panels with different selected template variables.

• Support large dashboards with dozens or hundreds of panels, providing an easy way to focus on what matters the most.

  • For instance, this might mean enabling you to search and view specific panels in a dashboard while dynamically adapting the view of it.

These are some of the scenarios that we’d like to help you with within your dashboards, and we expect to be able to build out even more features by using the Scenes library. For now, stay tuned for some exciting new features in core Grafana dashboards. If you have any feedback don’t hesitate to share it in the community forums and if you find any issues you can report those to our GitHub repository.

Grafana Cloud is the easiest way to get started with metrics, logs, traces, dashboards, and more. We have a generous forever-free tier and plans for every use case. Sign up for free now!