%% date:: [[2023-06-19]] parent:: [[Grafana]] %% # [[Grafana Scenes]] [repo](https://github.com/grafana/scenes) [docs](https://grafana.github.io/scenes/) Grafana Scenes is new extensible framework for building dynamic dashboards in [[Grafana]]. It was released in [[Grafana 10]] and both improves the experience of building a Grafana app while adding new features to dashboards. It is a JavaScript library with new APIs and components that developers can use to create new apps. It is not (yet) used by the Grafana core dashboards. <iframe width="560" height="315" src="https://www.youtube.com/embed/pJlWAD5SUYA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Why do we need Scenes? Grafana's existing dashboards have some limitations: [^goh] - You can't build one dashboard where panels have different time ranges to compare multiple periods of time. - Template variables can't be defined for sub-sections. - Limited layouts - Static; not great on mobile. - Limited ways to group panels. - No conditional displays of panels and dashboards. - No drill-down functionality! - Lack of framework for developing and sharing dashboards - Dashboards are a JSON file and there's no way to have that automatically update - No API for "creation of dashboard-like experiences and embed those in the app context" - Limited code and dashboard element reuse: you can reuse a panel, but you'd have to re-implement time range picker, refresh button, variables - No custom actions The workaround for those wanting the features above was to build a new Grafana app, but that meant that developers had to reimplement a lot of the same things. The Grafana team paid attention to the features that were rebuilt by different apps and decided to make many of them part of the Scenes framework. This duplication also led to an inconsistency in design and UX, as each developer implemented things differently. ## New features of Scenes - Ability to have time ranges, variables, and query runners on different levels of the dashboards so that, for example, a single query can power an entire dashboard - Cached results for better performance when moving between dashboards or tabs of a dashboard - Conditional display of panels (nested scenes) - Adaptive layout (changing the number and types of panels that are displayed depending on the results of a query) - State is remembered and synchronized to the URL (not the publicly shared one but the URL shared among members with permission) ## Future goals [^goh] Grafana Scenes are currently available for plugin developers to build on top of, but Scenes does not change the existing core dashboard functionality. However, the goal is to eventually move existing dashboards on top of the Scenes framework. The core dashboards will be like a Scenes application. After the core dashboards are using Scenes, some features that could be next for the dashboards from Scenes are: - adding tabs - creating a hierarchy within panels - better drilldown experience Another goal for a far future release is to support WYSIWYG dashboard building and editing based on Scenes. ## How it works [^grafanacon2023] ![[grafana-scenes-architecture-overview.png]] App developers can reuse dashboard components from Scenes: ![[grafana-scenes-scene-object.png]] Scenes can then be defined declaratively: ![[grafana-scenes-declarative-definition.png]] %% ## Resources - [Product DNA](https://docs.google.com/document/d/1ul5iE6Q-CFhjbu9SOe-6LbsC71hobiSnYkHvdrXq014/edit) - [Scenes demo by Torkel](https://raintank-corp.slack.com/archives/C01PWGFJKQ9/p1671104863626879) %% [^grafanacon2023]: Prokop, D. & Matei, B. (2023). *How to build dynamic, customizable dashboards with Grafana Scenes.* Retrieved from: https://grafana.com/about/events/grafanacon/2023/session/dynamic-dashboards-with-grafana-scenes/ [^goh]: Ödegaard, T. & van der Hoeven, N. (2023). *What is Grafana Scenes? with Torkel Ödegaard (Grafana Office Hours #02)*. Retrieved from: https://youtube.com/live/pJlWAD5SUYA