Skip to content

Releases: grafana/scenes

v0.7.0

08 May 07:21
Compare
Choose a tag to compare

Release Notes

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({ ... }),
      ...
    }),
  ],
  ...
})

🚀 Enhancement

  • @grafana/scenes
    • VizPanel: Support adding header actions to top right corner of PanelChrome #174 (@torkelo)
    • SceneAppPage: Add support for custom title #171 (@torkelo)

🐛 Bug Fix

Authors: 2

v0.6.0

21 Apr 15:10
Compare
Choose a tag to compare

🚀 Enhancement

  • @grafana/scenes
    • SceneObjectBase: Fixes issue with useState subscription misses state change that happens between frist render and useEffect #161 (@torkelo)

Authors: 1

v0.5.0

20 Apr 12:34
Compare
Choose a tag to compare

🚀 Enhancement

🐛 Bug Fix

Authors: 3

v0.4.0

18 Apr 07:57
Compare
Choose a tag to compare

Release Notes

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.


🚀 Enhancement

  • @grafana/scenes
    • Behaviors: Add state and runtime behavior to any scene object #119 (@torkelo)
    • SceneObjectBase: Activate parents before children #148 (@torkelo)

🐛 Bug Fix

  • 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)

Authors: 3

v0.3.0

03 Apr 13:31
Compare
Choose a tag to compare

Release Notes

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.


🚀 Enhancement

  • @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)

🐛 Bug Fix

  • @grafana/scenes
    • LayoutTypes: Cleanup old types that are no longer needed #120 (@torkelo)
    • Interpolation: Add support for __value.* macro that uses new scopedVar data context #103 (@torkelo)

⚠️ Pushed to main

  • @grafana/scenes
    • Revert "VizPanelRenderer: Only render when width and height greater than 0" (@dprokop)
    • VizPanelRenderer: Only render when width and height greater than 0 (@dprokop)

Authors: 2

v0.2.0

29 Mar 08:27
Compare
Choose a tag to compare

Release Notes

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:

  • SceneFlexItem for SceneFlexLayout
  • SceneGridItem and SceneGridRow for SceneGridLayout

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({ ... }),
    }),
  ],
  ...
})

🚀 Enhancement

  • @grafana/scenes

Authors: 3

v0.1.0

27 Mar 11:56
Compare
Choose a tag to compare

Release Notes

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.


🚀 Enhancement

  • @grafana/scenes

🐛 Bug Fix

Authors: 1

v0.0.32

27 Mar 10:01
Compare
Choose a tag to compare

🐛 Bug Fix

Authors: 2

v0.0.28

21 Mar 17:50
Compare
Choose a tag to compare

🐛 Bug Fix

⚠️ Pushed to main

Authors: 1

0.0.21

21 Mar 13:08
ff71727
Compare
Choose a tag to compare

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 #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
});