Access to core events & setting time range from a React ts panel

Grafana Plugin Development
1

I am writing a map panel and would like to do essentially what the trackmap does: respond to hover events like in https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/trackmap_ctrl.js#L71-L72.

This traces to

import appEvents from 'app/core/app_events';

Now the question is: how do I do that from a ts React panel?

Another operation that is of interest is setting the time range. Trackmap just does this.timeSrv.setTime but I can see only reacting to time range changes in PanelProps - that is essentially the whole api that a panel gets as far as I can tell.

Am I missing something crucial here? The panel tutorial at https://storage.googleapis.com/grafana-tutorials/build-a-panel-plugin/index.html#0 does not go into any details on this level.

2

I am still learning this stuff, but my investigation of the code suggests that a react panel will get a reference to the dashboard model and the PanelModel. These emit events into the AngularJS world, and those events seem to be picked up and trigger changes in the larger system.

HTH;

Amy

3

I think the code you linked deals with the state of the whole dashboard and an individual panel, but from Grafanaā€™s viewpoint: like is the panel in view or edit mode. I donā€™t see any of this or reference thereof being passed to my panel when constructed.

I suspect the way grafana-trackmap-panel hooks into Grafana internals is systemjs (see Gruntfile L56, only 2 links allowed for newbie like me) - in that plugin you just import app/core/app_events and voila!, itā€™s there at runtime.

But I have no idea where to start to incorporate that in my ts & React plugin.

4

PanelChrome does inject functionality for changing the time range (see lines 250 and 302), but it looks like there isnā€™t anything directly injected to set other variables (what I was seeing in my investigation was that stuff being injected into the panel header). I did find this How to change a dashboard variable value from a plugin?, and Iā€™m currently working to understand the mechanism heā€™s describing.

Sorry I canā€™t give you any official help, just offering my understanding as a fellow traveler :slight_smile:

5

Oh right, for some reason I had overlooked onChangeTimeRange - that works. Thank you very much!

1 Like
6

Got it!

import { SystemJS } from '@grafana/runtime'
SystemJS.load('app/core/app_events').then((appEvents:any) => {
  appEvents.on('graph-hover', (e:any) => console.log(e))
})

Again, thanks for the help, would have taken ages without your hints!

2 Likes
7

Iā€™m not sure this is a really ā€œreactā€ way to handle this, but glad it works for you :). Ideally, the Grafana team would update the PanelChrome code to provide a better way to get access to shared functionality in a clean way.

8

Agreed. @grafana/runtime readme says alpha and SystemJS smells like a kludge to me. With TypeScript the way to hook into G is pretty obvious so not much needs to be documented.

ā€Could not find a front entry so I came in via kitchen door.ā€

9

There was a PR to improve event handling for React plugins that unfortunately was closed due to old age. If this is important to you, let us know by adding reactions and comments to it.

10

Thanks for the heads up, did that.

1 Like
11

To change time range you can just use the function defined on PanelProps