Javascript/jQuery event on regular refresh intervals?

mvdlee · May 1, 2019, 11:25am

I have a custom javascript panel which loads and prints an RSS feed.
I’d like to have it refresh at regular intervals.
Currently I’m using a simple setInterval to refresh every few minutes.

I’d prefer to synchronize to the refresh rate of the dashboard instead.
It seems to me there is probably some sort of global event triggered on every refresh that my script should be able to listen to using jQuery.
Is there such an event my script can listen to?

daniellee · May 10, 2019, 7:06pm

Yes, you can bind to the refresh event like this:

github.com

NatelEnergy/grafana-plotly-panel/blob/master/src/module.ts#L172


  loadPlotly(this.cfg).then(v => {
    Plotly = v;
    console.log('Plotly', v);


    // Wait till plotly exists has loaded before we handle any data
    this.events.on('render', this.onRender.bind(this));
    this.events.on('data-received', this.onDataReceived.bind(this));
    this.events.on('data-error', this.onDataError.bind(this));
    this.events.on('panel-size-changed', this.onResize.bind(this));
    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
    this.events.on('refresh', this.onRefresh.bind(this));


    // Refresh after plotly is loaded
    this.refresh();
  });


  // Standard handlers
  this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
  this.events.on('panel-initialized', this.onPanelInitialized.bind(this));
}

mvdlee · May 15, 2019, 7:14am

Thanks! I guess that only works for proper plug-ins, and not for small Javascript bits in the Text/HTML panel? Ah well, might be wise to just go ahead with a full plug-in anyway.

daniellee · May 15, 2019, 10:59am

Oh, didn’t understand that was what you meant in your original question. Haven’t tried it but something like this might work:

mvdlee · May 15, 2019, 12:47pm

Yes! That’s perfect!
I ended up with something roughly like this:

function doSomething() {
  // ...
};

doSomething();
angular.element('grafana-app').injector().get('timeSrv').$rootScope.$on('refresh', doSomething);

mvdlee · August 9, 2019, 12:59pm

angular.element('grafana-app').injector().get('timeSrv').$rootScope
is undefined on Grafana 6.2.5
Instead, this now works:
angular.element('grafana-app').injector().get('$rootScope').$on('refresh', doSomething);

raulsperoni · March 3, 2020, 6:20pm

Hi! How can you do this in react?

amyatbroadcom · March 4, 2020, 4:03pm

The current time range is injected into the panel. So when that changes, it should cause a re-render.

devtomekpl · August 16, 2021, 6:29am

working solution for Grafana 7+

function doSomething() {
  console.log("refreshed")
};
angular.element('grafana-app').injector().get('timeSrv').dashboard.events.emitter.addListener('refresh', doSomething)