What is the best plugin code template for Grafana 7.x integration?

Grafana Plugin Development
1

I’m new to Grafana and React and I’m creating some panels. I’m learning from tutorial and reading legacy plugins from grafana code.

I can see differences in the plugins code used in grafana main code, e.g. in https://github.com/grafana/grafana/tree/master/public/app/plugins/panel

and taht generated by e.g. npx @grafana/toolkit plugin:create my-plugin

What would be the best templating for the best and complete grafana 7.X integration?

I would reuse plugin structure as from the legacy plugins that are using latest fields and override options integration, something that is not generated automatically from plugin:create.

what’s your opinion?

regards,

Luigi Pirelli

2

manin difference that I can see are that:

  • legacy plugins use e.g:
    export class TablePanel extends Component {…}
    with methods render(), componentDidMount() and componentDidUpdate() to manage render lifecycle
  • template genrated plugin use e.g
    export const SimplePanel: React.FC = ({ width, height }) => {…}
    with it’s templated html return to manage rendering and evenctually usign useEffect to render in specific conditions

Both derive from React “Component” but way to manage instance variable lifecycle and scoping is different (as far I can see)

3

As far as understand:

  • legacy plugins are grafana API oriented
  • template generated plugin are React oriented (more Hook and classless)

suggestions for best and cost effective integration into Grafana now and for next features?

4

Hello luipir,

I’d suggest you take a look at the grafana toolkit. It creates an exemplary instance of a datasource/panel/… plugin (you can select your preference during creation). You can then modify and extend the code to reflect your needs. It has served me well for creating a React-based datasource plugin.

Best regards,
A.