Change Angular to React

[geeks-r-us]

Due to Grafana deprecated Angular in favor of React
The Plugin should change the framework before more graphical extensions are done?
Personally I have never worked with react before so:

Let's check the effort it takes to move to react.

[geeks-r-us]

I had a look at the Grafana react plugin capabilities and it seems at the beginning of version 7 there were also statefull react components allowed but more current there are only stateless panels allowed. This prevents maintaining a connection the mqtt server and the subscription to the topics.

Currently there is an emerging Grafana App API which consists of stateless panels and a statefull backend part. But this needs to be written in go.

Pros:

• When running on the backend beside ws / wss also mqtt / mqtts connections could be established
• Subscription keep going even no one is connected to the dashboard which allows alarms on changing topics, etc.
• React panels are much cleaner in their implementation

Cons:

• Complete rewrite of the plugin
• Need more experience with react and go
• Is Grafana App API already stable?
• Breaks compatibility with running Version 6 ?

I think I'll set this as goal for version 2 of this plugin and maintain version 1 as Angular based plugin.

[s-torneo]

I'm developing a backend plugin in Go and a panel plugin in React and typescript. The backend makes a mqtt client that you connect to a broker according to the configurations set, receives http internal requests from panel plugin and gives the response to them in order that panel plugin can show the response. At the moment I have developed a first version in which you can configure one or more mqtt clients (Grafana backend datasource) and one or more Grafana panel plugin that send requests to the mqtt client selected. In the panel plugin you can select the Mqtt operation (Connect/Disconnect/Subscribe/Unsubscribe/Publish) in order to show a different interface according to the operation selected. Have you already started to develop something like this?

[bbinet]

Hello @s-torneo, this is very interesting. I was thinking of doing the same in the mid-term future.
Would you like to share your work on the backend plugin in Go and panel plugin in React?

[geeks-r-us]

I also have a working MQTT connection. I currently struggle with the storage and update of the change topic values. And the identification which panel is requesting the data.

@s-torneo, @bbinet that sound interesting. Maybe we could join forces?

[s-torneo]

HI @geeks-r-us and @bbinet, yes we can collaborate. I have finished to develop a first version, now it is available to this repository: https://github.com/s-torneo/mqtt-grafana-backend-panel-plugins.