I have a node-red -> mqtt -> Telegraf -> influxdb data flow which logs (for example) lights being turned on or off. The next stage will be to use node-red-contrib-influxdb and cut out mqtt, however, that's not the point of this post.
I would like to display raw influxdb data in a table on a uibuilder web page and have it update in real time. e.g. a list of Time, flow, device, status
Possible ?
Does anyone have any sign posts ? example code ? etc . I'm not sure how to start, should I pull the data, can I push the data, should I use a websocket ?
Influxdb is a timeseries database - used for storing metrics with timestamps (measurements).
A light on/off is not a real metric/measurement, although it could be used as one i guess as long as it is timestamped
Grafana is an ideal tool to use with influxdb, this is how most people use it, but note it is only for monitoring, not for interaction (eg. if you want to send data back to node red)
both really. I may have disapperared down a rabbit hole. What I want is to display nodered events (history and realtime) in a table embeded in uibuilder. To report and troubleshoot only. Having done that add nodered logs.
I started with TotallyInformation's node red logs into uibuilder via mqqt. Then I used that to get NodeRed events into a page via mqtt (e.g. Hall Light On). So far so good.
The problem with that is that it has no history. So I thought about a database. I have some other weather / astronomy data I need to log and graph so I wondered if I could use influxdb. Events are effectively timestamped measurements (binary - on or off) so it seemed that influx would be quite capable.
As I said I have a working set up "node-red -> mqtt -> Telegraf -> influxdb" so its entirely possible to record the data. I am going to go back a few steps as during experimentation my influxdb setup became a bit messy (no problem as its dockerised) and I am going to change to use the influxdb node to get data straight into influx from nodered missing out mqtt.
I have since seen that grafana pages can be embeded in iframes so it looks like I can do this....NodeRed events -> influxdb -> grafana (table report) -> uibuilder (via iframe).
I doubt that is going to be real time but worstcase I can make a 'refresh' button.... in any event grafana looks like it can do real time through 'live'..... another day, another experiment.
The pupose of my post was to a) see if anyone had any advice / signposts, b) to effectivly enquire if there was an easier way and finally c) to leave a trail of breadcrumbs if anyone else wants to try.
Certainly. Though, being pedantic, it won't actually be "real time", there will always be a small delay as the data has to travel across systems and the network.
You should. However, uibuilder already does this for you, you don't need to worry about it. You just send the data to the uibuilder node and it is immediately available in your browser.
You will pull the data from InfluxDB using a query and send it to the uibuilder node.
You will then need some code in the front-end index.js file that listens for an incoming msg from Node-RED and creates an HTML table to display it.
The listening part is easy as the client library provides a helper:
uibuilder.onChange('msg', (msg) => {
// ... your code ....
})
Formatting raw data into an HTML table (assuming that's how you want it displayed) is a little more challenging.
So to help with that part, you have another option that uibuilder provides - or, if you are prepared to work with the v6.1 beta, you can have a very easy, no-code way.
So firstly the way that is already available in v6.0. Have a look at this page in the docs: The modern front-end client (totallyinformation.github.io). It will perhaps take you a couple of reads to get your head around it but this lets you create a table for example from your source data.
Even easier though would be to run up a test instance of node-red and install the beta version of uibuilder v6.1 (cd ~/.node-red && npm install totallyinformation/node-red-contrib-uibuilder#v6.1.0). Then as long as the data you have extracted from InfluxDB is in a tabular format, you should be able to send it straight to a uib-element node set to produce a table and send the output of that node to your uibuilder node. The only downside of that being that every time you update the query, the whole table gets rebuilt which might flicker if you do it too quickly. I'm still working on am option in the uib-element node to add rows to a table. However, now you've prompted me, maybe I'll work on that now as I'm not at work today.
PS: I should, of course, have said that there is a 3rd option that works with the current uibuilder version, and that is to use VueJS v2 and bootstrap-vue which contains a table component.
In the end I went nodered -> influxdb -> grafana -> uibuilder (embedded grafana). A longer route than suggetsed by you but at least requery, diferent historic timeframes are all handled by Grafana.
It all works but needs a bit of tidying up. Once I have all that completed I will post a "HOWTO", if anyone is interested.
