%% date:: [[2023-06-19]] parent:: %% # [[How to build dynamic, customizable dashboards with Grafana Scenes]] speaker:: "[[Dominik Prokop]], [[Bogdan Matei]]" - Dominik is from [[Ukraine]], but lives in [[Romania]] - Bogdan lives in [[Poland]] - They were looking at app development and they had some things in common - filtering - complex architecture and customer interactions - multi-page apps - query with time range - Ex: [[Grafana Kubernetes Monitoring]], [[Grafana Cloud k6]] - App developers had to reimplement these features - Scenes is a new library that makes dashboard features available to plugin developers - Reuse dashboard elements - Other features - Versatile layout - Pages with tabs - Multiple time ranges - URL state synchronization: when you share a link, the state of every object will be synced - Drilldown pages - ![[grafana-scenes-scene-object.png]] ![[grafana-scenes-architecture-overview.png]] - Declarative way to build scenes ![[grafana-scenes-declarative-definition.png]] - New feature called App Observability, in private preview - to be released later this year. - Responsiveness on mobile is better with Scenes - Conditional display of panels depending on what the user does - Example: drilldown - Challenges faced in development - hard to handle multiple data source pickers - Had to overwrite some Grafana panels - URL management was a pain - maintaining state for all elements was really difficult - Design consistency was a focus - Bogdan and Dominik got together during [[GKO 2023]] - Dominik mentioned Scenes to Bogdan while walking back to their hotel. - It took only two days to migrate the first plugin to Scenes. Yay! - Scenes provided better [[Separation of Concerns]]: the App Observability team could focus only on new features, not on framework and foundation. - [[Respect Levels of Abstraction|Abstraction]] helped speed up development by thinking in terms of Scenes objects - https://github.com/grafana/scenes - https://grafana.github.io/scenes/