0

I'm trying to make a custom panel plugin for Grafana 7.5.2 using TypeScript and React.

At the moment I'm traying to understand the mechanics of updating the front-end (React) when new data is available (in 7.5. data is stored in a DataFrames and series).

By exploring the Grafana source I came across the eventBus, busEvent constructs and publish/subscribe concepts but I have a hard time understanding how to use all this.
Sadly the majority of examples online are not relevant in 7.5.

Can someone share a snippet/example on how to implement updating a panel when new data is available? As a source I will be using ElasticSearch.

I'm writing a plugin like:

    interface Props extends PanelProps { ... }
    interface State { ... }
    export class CustomPanel React.PureComponent<Props, State>{ 
    ...  
    render(){
       return ( ... )
      }
    }
MetalHead
  • 181
  • 1
  • 15
  • Did you ever figure this out? – Niels Aug 23 '21 at 10:18
  • 1
    @Niels I found the answer on Grafana forum after asking the same question: With the new React platform, instead of having to subscribe to the data, it’s passed as an input to your component as part of the props. You can find the data under this.props.data.series. In fact, for the most part you shouldn’t need to worry about events at all. – MetalHead Aug 27 '21 at 08:18
  • Thanks for letting me know! Turned out my issue was caused by a deeper misunderstanding of how the react components interact. All fixed now though! – Niels Aug 30 '21 at 09:57
  • Great to hear. Same here. – MetalHead Aug 31 '21 at 10:54

0 Answers0