Variables: Notify scene after each variable completion or value change (#525)
VariableDependencyConfigLike interface has changed so that scene objects now get notified after each variable update is completed (or changed value). Before, the SceneVariableSet waited for all variables to complete before notifying scene objects.
The function variableUpdatesCompleted has changed name and signature:
variableUpdateCompleted(variable: SceneVariable, hasChanged: boolean): void;VariableDependencyConfig has also some breaking changes. The function named onVariableUpdatesCompleted has changed name and signature to:
onVariableUpdateCompleted?: () => void;VariableDependencyConfig now handles the state logic for "waitingForVariables". If you call VariableDependencyConfig.hasDependencyInLoadingState and it returns true it will remember this waiting state and call onVariableUpdateCompleted as soon as the next variable update is completed, no matter if that variable is a dependency or if it changed or not.
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SceneGridLayout: Support new visualization tooltips #530 (@torkelo)
- Adhoc filters variable improvements #518 (@javiruiz01)
@grafana/scenes- Revert "Chore: Update peer dependencies" #533 (@leventebalogh)
- Javier Ruiz (@javiruiz01)
- Levente Balogh (@leventebalogh)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SplitLayout: Allow pane style overrides to be passed through #531 (@kaydelaney)
- Correct developer docs link in README #522 (@annanay25)
@grafana/scenes
- Annanay Agarwal (@annanay25)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
- Update README with developer docs #520 (@annanay25)
- Moving the grafana monitoring demo app to scenes-app #512 (@torkelo)
- Demos: Adds an example with InteractiveTable with exandable rows that shows sub scenes #505 (@torkelo)
@grafana/scenes- SceneTimeRange: Support delay now to avoid data drops in charts #509 (@ivanortegaalba)
- Fix issue with duplicate annotations #515 (@domasx2)
- SceneQueryRunner: Fix redundant execution on variable change #519 (@domasx2)
- Splitter: Fixes small issue with keyboard control #498 (@kaydelaney)
- Annanay Agarwal (@annanay25)
- Domas (@domasx2)
- Ivan Ortega Alba (@ivanortegaalba)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- CSSGridLayout: Remove semi colon #511 (@adrapereira)
- Andre Pereira (@adrapereira)
@grafana/scenes- CSSGridLayout: Lazy loading #510 (@adrapereira @torkelo)
- Andre Pereira (@adrapereira)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SplitLayout: Allow setting initial size #496 (@cedricziel @dprokop)
- Cedric Ziel (@cedricziel)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Dominik Prokop (@dprokop)
@grafana/scenes- Variables: Query - Add optional
definitionprop to state #489 (@axelavargas)
- Variables: Query - Add optional
- Alexa V (@axelavargas)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Dominik Prokop (@dprokop)
@grafana/scenes- Variables: Add type guards for variables #472 (@javiruiz01)
- Javier Ruiz (@javiruiz01)
@grafana/scenes- fix: compare time ranges using actual unix time vs objects #468 (@darrenjaneczek)
- Darren Janeczek (@darrenjaneczek)
@grafana/scenes- Variables: Add natural sort from core grafana to query variables #459 (@axelavargas)
@grafana/scenes
- Alexa V (@axelavargas)
- Ana Ivanov (@anaivanov)
- Dominik Prokop (@dprokop)
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- Variables: Register variable macro #452 (@torkelo)
- Variables: Support for variables on lower levels to depend on variables on higher levels #443 (@torkelo)
- VizPanel: Handle empty arrays when merging new panel options #447 (@javiruiz01)
- PanelContext: Eventbus should not filter out local events #445 (@torkelo)
- Variables: Support __org and __user variable macros #449 (@torkelo)
- SceneQueryRunner: Fixes adhoc filters when using a variable data source #422 (@torkelo)
- VizPanel: Support passing legacyPanelId to PanelProps #446 (@torkelo)
- Javier Ruiz (@javiruiz01)
- Torkel Ödegaard (@torkelo)
- Eric Jacobson (@erj826)
- Javier Ruiz (@javiruiz01)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
DataSourceVariable: Value should be uid, and other fixes (#400)
DataSourceVariable value is now the uid of the data source not the name. Please test and verify that your data source variables works like before.
- [cr] adds docs for SceneCSSGridLayout #423 (@jewbetcha @torkelo)
- Refactor demo list page, use grid layout, add search #432 (@torkelo)
@grafana/scenes- SceneGraph: Add utility function getAncestor #428 (@torkelo)
- VizPanel: Make VizPanel usable without relative position parent #430 (@torkelo)
- SceneCSSGridLayout: Make rowGap and columnGap use grid units #431 (@torkelo)
- Export VizPanelBuilder #429 (@torkelo)
- DataSourceVariable: Value should be uid, and other fixes #400 (@torkelo)
- [cr] creates SceneCSSGridLayout to use CSS Grid with SceneFlexItems #392 (@jewbetcha @torkelo)
- Coleman Rollins (@jewbetcha)
- Juan Luis Peña Wagner (@piggito)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SceneTimeRange: Respect time zone when updating time range #420 (@dprokop)
- UrlSync: Fixes and one update #419 (@torkelo)
- AdhocFilterVariable: Render expr (value) in constructor #417 (@torkelo)
- Revert "SceneTimeRange: Respect time zone when updating time range" #418 (@torkelo)
- AdHocFiltersVariable: Fixes issue with unnessary change events #414 (@torkelo)
- SceneTimeRange: Respect time zone when updating time range #413 (@dprokop)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SceneTimePicker: Add posibility to navigate backwards/forwards an absolute time range #408 (@kaydelaney)
- kay delaney (@kaydelaney)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes- Scenes: Interval Variable now considers $__auto_interval #407 (@axelavargas)
- Alexa V (@axelavargas)
@grafana/scenes
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- AdhocFilters: Add docs for AdhocFilterSet and AdhocFiltersVariable #377 (@torkelo @dprokop)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- Variables: Implement Interval Variable #365 (@axelavargas)
- Variables: Support skipUrlSync option #376 (@torkelo)
@grafana/scenes
- Alexa V (@axelavargas)
- Domas (@domasx2)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Prevent publishing to github pages #362 (@tolzhabayev)
- Dominik Prokop (@dprokop)
- Timur Olzhabayev (@tolzhabayev)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
@grafana/scenes
- Dominik Prokop (@dprokop)
@grafana/scenes
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- TestVariable: Add optionsToReturn and other unrelated changes #314 (@torkelo)
- Variables: New LocalValueVariable to better support repeating panels #317 (@torkelo)
- VizPanel: Remove left-over isDraggable/isResizable state #315 (@torkelo)
- QueryVariable: Support null ds #316 (@torkelo)
- SceneTimeRangeTransformerBase #312 (@torkelo)
- VizPanel: Allow panels to rendered without layout parent #302 (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
Allow time range comparison (#244)
You can now automatically perform queries against a secondary time range to visualize time-over-time comparisons. Use SceneTimeRangeCompare as in the example below:
const queryRunner = new SceneQueryRunner({
datasource: {
type: 'prometheus',
uid: 'gdev-prometheus',
},
queries: [
{
refId: 'A',
expr: 'rate(prometheus_http_requests_total{handler=~"/metrics"}[5m])',
},
],
});
const scene = new EmbeddedScene({
$data: queryRunner,
$timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
controls: [
new SceneTimePicker({}),
new SceneTimeRangeCompare({}) // Use this object to enable time frame comparison UI
],
body: new SceneFlexLayout({
direction: 'row',
children: [
new SceneFlexItem({
width: '100%',
height: '100%',
body: PanelBuilders.timeseries().setTitle('Panel using global time range').build(),
}),
],
}),
});@grafana/scenes- Allow time range comparison #244 (@dprokop @kaydelaney)
- Dominik Prokop (@dprokop)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- Allow template variables to be cancelled #261 (@kaydelaney)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
- Dominik Prokop (@dprokop)
- Adding developer portal dev workflow and config #276 (@tolzhabayev)
@grafana/scenes
- Dominik Prokop (@dprokop)
- Timur Olzhabayev (@tolzhabayev)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- Bump grafana dependencies #273 (@kaydelaney)
- Dominik Prokop (@dprokop)
- kay delaney (@kaydelaney)
- Pierre Baumard (@pbaumard)
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
@grafana/scenes
@grafana/scenes- SceneGridRow: Fix rows auto collapsing on load due to url sync #241 (@torkelo)
- SceneQueryRunner: Support
liveStreaming#239 (@kaydelaney)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
@grafana/scenes- SceneQueryRunner: Cancel previous request when starting new one #238 (@kaydelaney)
- kay delaney (@kaydelaney)
@grafana/scenes- PanelBuilders: Add method for setting behaviors #235 (@dprokop)
- SplitLayout: Add Splitter and SplitLayout #229 (@kaydelaney @dprokop)
- Dominik Prokop (@dprokop)
- kay delaney (@kaydelaney)
@grafana/scenes- VizPanel: Allow queries to be cancelled #220 (@kaydelaney @dprokop)
- Dominik Prokop (@dprokop)
- kay delaney (@kaydelaney)
- Dominik Prokop (@dprokop)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Torkel Ödegaard (@torkelo)
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
- Core Concepts: Small docs changes #206 (@kaydelaney)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
- Dominik Prokop (@dprokop)
@grafana/scenes
- Dominik Prokop (@dprokop)
Add support for timezones (#167)
You can now use multiple time zones in Scene. SceneTimeRange and SceneTimePicker respect time zone settings. Additionally, a new object was added, SceneTimeZoneOverride. It can be used to override the time zone provided by a time range object higher in the scene hierarchy. Objects within SceneTimeZoneOverride scope will use the closest SceneTimeRange range, but a locally specified time zone.
Example:
const scene = new EmbeddedScene({
$timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now', timeZone: 'browser'}),
children: [
// Will use global time range and time zone
new VizPanel({
$data: new SceneQueryRunner({ ... }),
...
}),
// Will use global time range and locally specified time zone
new VizPanel({
$timeRange: new SceneTimeZoneOverride({ timeZone: 'America/New_York' }),
$data: new SceneQueryRunner({ ... }),
...
}),
],
...
})@grafana/scenes
@grafana/scenes
- Torkel Ödegaard (@torkelo)
@grafana/scenes
- Dominik Prokop (@dprokop)
- juanicabanas (@juanicabanas)
- Torkel Ödegaard (@torkelo)
Behaviors: Add state and runtime behavior to any scene object (#119)
You can now augment any scene object with runtime state & behavior using the new $behaviors state key. Behaviors are implemented as SceneObjects that are activated when their parent is activated or as pure functions that get called when the SceneObject they are attached to get's activated.
With behaviors you can easily implement conditional display of panels using the new isHidden property on SceneFlexItem. and other dynamic layout behaviors. View the behaviors demo for some examples.
@grafana/scenes
- Docs: Getting started and core concepts #136 (@dprokop)
- SceneApp: Share defaults between demos #132 (@torkelo)
- PackageJson: Simple scripts to run app dev from root #133 (@torkelo)
@grafana/scenes- SceneQueryRunner: Return after setting empty state #145 (@torkelo)
- SceneGridLayout: Support lazy rendering of items out of view #129 (@kaydelaney @torkelo)
- UrlSync: Makes url sync work on SceneAppPage level #143 (@torkelo)
- SceneAppPage: Refactorings and adding default fallback routes #142 (@torkelo)
- Flex layout item parent direction #141 (@dprokop @torkelo)
- SceneApp: Correctly build demo pages with getParentPage #137 (@torkelo)
- Templating: Add macros for __data, __field and __series #131 (@torkelo)
- FlexLayout: Allow SceneFlexLayout to be child of another flex layout #135 (@dprokop)
- FindObject: Fixes search logic so that it does not get stuck in infine loops #140 (@torkelo)
- sceneGraph: findObject #127 (@torkelo)
- SceneAppPage: Support dynamic pages (changing tabs, title, controls) #71 (@torkelo)
- scene-app: Refactor to use SceneAppPage for demos #125 (@torkelo @dprokop)
- Packages: Update grafana/* to latest #130 (@torkelo)
- QueryEditor: Adds inline query editor scene object #43 (@kaydelaney @dprokop)
- SceneVariableSet: Refresh variables that depend on time range #124 (@dprokop)
- ValueMacro: Fixes so __value works for rowIndex 0 #123 (@torkelo)
- Dominik Prokop (@dprokop)
- kay delaney (@kaydelaney)
- Torkel Ödegaard (@torkelo)
SceneObject: Rename SceneObjectStatePlain to SceneObjectState (#122)
SceneObjectStatePlain is now named SceneObjectState. So if you have custom scene objects that extends SceneObjectStatePlain just do a search and replace for SceneObjectStatePlain and replace withSceneObjectState.
@grafana/scenes- SceneObject: Rename SceneObjectStatePlain to SceneObjectState #122 (@torkelo)
- VizPanel: Updates to support panel context #113 (@torkelo @dprokop)
- SceneObject: Add forEachChild to SceneObject interface and SceneObjectBase #118 (@torkelo)
- SceneObject: Change how activate works and remove deactivate #114 (@torkelo)
@grafana/scenes
@grafana/scenes
Layout: Create atomic, layout specific objects (#97)
The interface of SceneFlexLayout and SceneGridLayout has changed. These scene objects now accept only dedicated layout item objects as children:
SceneFlexItemforSceneFlexLayoutSceneGridItemandSceneGridRowforSceneGridLayout
placement property has been replaced by those layout-specific objects.
Example
// BEFORE
const layout = new SceneFlexLayout({
direction: 'column',
children: [
new VizPanel({
placement: {
width: '50%',
height: '400',
},
...
})
],
...
})
// AFTER
const layout = new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
width: '50%',
height: '400',
body: new VizPanel({ ... }),
}),
],
...
})@grafana/scenes
UrlSync: Simplify url sync interface (#100)
The SceneObjectUrlSyncHandler interface has changed. The function getUrlState no longer takes state as parameter. The implementation needs to use the current scene object state instead.
- Torkel Ödegaard (@torkelo)
- Scene: Support for new types of "macro" variables starting with __all_variables #98 (@domasx2 @torkelo)
- UrlSyncManager: Improvements and fixes #96 (@torkelo)
- UrlSync: SceneObject that implement url sync _urlSync property will now see a change to how updateFromUrl is called. It is now called with null values when url query parameters are removed. Before the UrlSyncManager would remember the initial state and pass that to updateFromUrl, but now if you want to preserve your current state or set to some initial state you have to handle that logic inside updateFromUrl.
- Removal of isEditing from SceneComponentProps (also $editor from SceneObjectState, and sceneGraph.getSceneEditor)
- DataSourceVariable state change, query property is now named pluginId
SceneObject subscribeToState parameter change
Signature change. Now the parameter to this function expects a simple function that takes two args (newState, prevState).
Before:
this._subs.add(
sourceData.subscribeToState({
next: (state) => this.transform(state.data),
})
);Becomes:
this._subs.add(sourceData.subscribeToState((state) => this.transform(state.data)));addActivationHandler
SceneObject now has a new function called addActivationHandler that makes it much easier to add external behaviors to core scene componenents. The activation handler (callback) can return a deactivation handler. This works very similar to useEffect.
For custom components that used to override activate and then call super.activate() we now recommend that you instead use addActivationHandler from the constructor. See grafana#77 for some examples.
VizPanelMenu
A new scene object to enable panel menu for VizPanel.
Example usage:
const menu = new VizPanelMenu({});
// Configure menu items
menu.addActivationHandler(() => {
menu.setItems(menuItems);
});
// Attach menu to VizPanel
const panelWithMenu = new VizPanel({
title: 'Panel with menu',
menu,
// ... VizPanel configuration
});To see more examples, please look at VizPanelMenu demo.
Scene App demos
Scene App included with this repo now contains Demos page in which we will continue providing examples of particular @grafana/scenes usages. Run ./scripts/demo.sh and navigate to http://localhost:3001/a/grafana-scenes-app/demos to see available demos.
AppScenePage
The getScene for drilldowns now expect the parent property to be of type AppScenePageLike (interface).
SceneQueryRunner no longer has transformations
Instead you have to use SceneDataTransformer and set its internal $data property to the SceneQueryRunner to get the same effect.
Example:
$data: new SceneDataTransformer({
$data: new SceneQueryRunner({...}),
transformations: [
{
id: 'reduce',
options: {
reducers: ['mean'],
},
},
],
}),SceneDataTransformer can still be used to transform parent scoped data, it will look for this if there is no $data property set.
The reasons for this change it to have more control over when only transformations should be re-processed (to not issue query again when only a dependency on the transforms changed). It also removes some duplication between SceneQueryRunner and SceneDataTransformer. There is also a new interface SceneDataProvider.
export interface SceneDataProvider extends SceneObject<SceneDataState> {
setContainerWidth?: (width: number) => void;
}Change PR grafana#55