Added more documentation.
38
docs/dashboard/README.md
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
# Grafana
|
||||||
|
|
||||||
|
Grafana is an open source analytics and interactive visualization tool. It provides charts, graphs, and alerts for the web when connected to supported data sources.
|
||||||
|
|
||||||
|
As a visualization tool, Grafana is a popular component in monitoring stacks, often used in combination with time series databases such as InfluxDB.
|
||||||
|
|
||||||
|
## Connection
|
||||||
|
|
||||||
|
To connect Grafana to our Influx-DB, you have to create a data source.
|
||||||
|
|
||||||
|
The `URL`of our InfluxDB is `http://influxdb:8086`.
|
||||||
|
|
||||||
|
In InfluxDB you have to create a `token` to connect: [Load Data -> API Tokens](http://localhost:8086/orgs/721027680173bf2f/load-data/tokens).
|
||||||
|
|
||||||
|
![Influx Create Token](../flow/docs/images/influx-create-token.png)
|
||||||
|
|
||||||
|
You can use this token to [create a connection from Grafana to Influx-DB](http://localhost:3000/datasources/).
|
||||||
|
|
||||||
|
![Connection](./docs/images/database-connection.png)
|
||||||
|
|
||||||
|
After having a connection to a database you can easily create an own dashboard in Grafana.
|
||||||
|
|
||||||
|
Here's the demo snippet (directly copyied from Influx Data Explorer) and the screen shot.
|
||||||
|
|
||||||
|
```
|
||||||
|
from(bucket: "test")
|
||||||
|
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|
||||||
|
|> filter(fn: (r) => r["_measurement"] == "msg")
|
||||||
|
|> filter(fn: (r) => r["_field"] == "value")
|
||||||
|
|> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
|
||||||
|
|> yield(name: "mean")
|
||||||
|
```
|
||||||
|
|
||||||
|
![Example Dashboard](./docs/images/grafana-example-dashboard.png)
|
||||||
|
|
||||||
|
## CSV Import
|
||||||
|
|
||||||
|
See [CSV Import](./docs/csv-import.md).
|
30
docs/dashboard/docs/csv-import.md
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
# CSV Import
|
||||||
|
|
||||||
|
## Grafana
|
||||||
|
|
||||||
|
In Grafana there is a [csv-datasource plugin](https://grafana.github.io/grafana-csv-datasource/). This plug lets you visualize data from any URL that returns CSV data, such as REST APIs or static file servers. You can even load data from a local file path. But it is *not* importing CSV from Grafana into a data source (like InfluxDB) or uploading CSV data to a local file system.
|
||||||
|
|
||||||
|
> For visualizing CSV data this is enough. Why should you duplicate data if the true data source is a CSV file located somewhere in the internet. If the CSV is not online, this might be another story.
|
||||||
|
|
||||||
|
I added this plugin to our Grafana installation, so it's ready to be used.
|
||||||
|
|
||||||
|
> I just mounted the whole [Grafana directory](../grafana/) into our Docker-Compose setup. Maybe we have to come up with a better solution.
|
||||||
|
|
||||||
|
![Mounted directory](./images/mounted-grafana-directory.png)
|
||||||
|
|
||||||
|
Garafana is running on [localhost on port 3000 with credentials admin:admin](http://localhost:3000). So let's get there to add the CSV file as a usable data source.
|
||||||
|
|
||||||
|
> I added the CSV file to this repository and mounted it into our Docker-Compose setup. So the CSV file is also available in Grafana. Maybe we have to come up with a better solution..
|
||||||
|
|
||||||
|
As the CSV is reachable by Grafana, you can create a data source, there.
|
||||||
|
|
||||||
|
![Mounting a CSV file](./images/grafana-csv-data-source.png)
|
||||||
|
|
||||||
|
> grafana.ini is also mounted from [this repository](../grafana.ini). So local data mode is enabled.
|
||||||
|
|
||||||
|
Whith Grafana having access to data in the CSV file, it's easy to access this data to create a dashboard.
|
||||||
|
|
||||||
|
![Using CSV data](./images/grafana-csv-data.png)
|
||||||
|
![Defining types](./images/grafana-csv-data-type.png)
|
||||||
|
![Two boards in Grafana](./images/grafana-two-boards.png)
|
||||||
|
|
BIN
docs/dashboard/docs/images/database-connection.png
Normal file
After Width: | Height: | Size: 112 KiB |
BIN
docs/dashboard/docs/images/grafana-csv-data-source.png
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
docs/dashboard/docs/images/grafana-csv-data-type.png
Normal file
After Width: | Height: | Size: 85 KiB |
BIN
docs/dashboard/docs/images/grafana-csv-data.png
Normal file
After Width: | Height: | Size: 207 KiB |
BIN
docs/dashboard/docs/images/grafana-example-dashboard.png
Normal file
After Width: | Height: | Size: 214 KiB |
BIN
docs/dashboard/docs/images/grafana-two-boards.png
Normal file
After Width: | Height: | Size: 117 KiB |
BIN
docs/dashboard/docs/images/mounted-grafana-directory.png
Normal file
After Width: | Height: | Size: 44 KiB |
109
docs/flow/README.md
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
# About
|
||||||
|
|
||||||
|
> This folder will be mounted into the Node-RED runtime. So be careful.
|
||||||
|
|
||||||
|
# Node-RED
|
||||||
|
|
||||||
|
If you boot up our tech stack using `docker-compose` you already have a Node-RED instance running on [your local machine](http://localhost:1880/).
|
||||||
|
|
||||||
|
Node-RED is an open-source, low-code, visual programming tool based on the concept of flow-based development. The idea behind it is to make it very easy to connect APIs, hardware devices, and anything else accessible over some type of network connection.
|
||||||
|
|
||||||
|
## Core Concepts
|
||||||
|
|
||||||
|
Nodes are the important part of Node-Red. They are the building blocks when working with Node-Red. Nodes are triggered by either receiving a message object from a previous node or an external event like an MQTT event. The node processes the message or event and then passes it on to the next node.
|
||||||
|
|
||||||
|
A node can:
|
||||||
|
* Inject: Starts a flow by injecting a message or a payload.
|
||||||
|
* Change: Here you can do basic transformation or modification on the message object.
|
||||||
|
* Debug: Can be used to help developing flows by sending messages to the side bar.
|
||||||
|
* Switch: Here you can add logic (like sending the message to different nodes).
|
||||||
|
* Function: Add custom JavaScript for uses cases where simple nodes do not do the trick.
|
||||||
|
|
||||||
|
Flows are an organized sequence of nodes. Let's do the "first steps" by creating a simple flow.
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
> The plugin folder is pushed into this Git repository and is mounted in Docker. Maybe we should use an own Docker file, instead.
|
||||||
|
|
||||||
|
Node-RED uses plugins (e.g. for InfluxDB or own Dashboard capabilites).
|
||||||
|
|
||||||
|
You can access the plugins in the right burger menu.
|
||||||
|
|
||||||
|
![Plugins](./docs/images/node-red-plugins.png)
|
||||||
|
|
||||||
|
## First steps
|
||||||
|
|
||||||
|
For debuging I already added Node-RED's own dashboard (sure, we are going to use Grafana, later).
|
||||||
|
|
||||||
|
![Overview](./docs/images/1-overview.png)
|
||||||
|
|
||||||
|
The dashboard should be visible on the righmost menu item in Node-RED.
|
||||||
|
|
||||||
|
![Dashboard item](./docs/images/dashboard.png)
|
||||||
|
|
||||||
|
In Node-RED you can add a MQQT node to receive values from the power monitor. As we run in `docker-compose`you don't have to use the IP address of our Eclipse Mosquitto sever, but you can simply use `mosquitto` as the host nome.
|
||||||
|
|
||||||
|
![MQTT Node](./docs/images/2-mqtt-node.png)git a
|
||||||
|
|
||||||
|
To simply display the values in a gauge (or chart) you can hook it up to a gauge node.
|
||||||
|
|
||||||
|
![Gauge Node](./docs/images/3-gauge-node.png)
|
||||||
|
|
||||||
|
In the dasboard section you have to create a tab. Inside this tab you have to create a group.
|
||||||
|
|
||||||
|
![Dashboard Settings](./docs/images/4-dashboard-node.png)
|
||||||
|
|
||||||
|
The tricky part is putting the gauges in the group. This is done in the gauge's settings (not in the dashboard's settings).
|
||||||
|
|
||||||
|
![Gauge Node](./docs/images/3-gauge-node.png)
|
||||||
|
|
||||||
|
You can view the dashboard in an (also mobile) web browser.
|
||||||
|
|
||||||
|
![Mobile view](./docs/images/5-dashboard.png)
|
||||||
|
|
||||||
|
Have a look at the flow also in [this repository](./00-dashboard-example/dashboard.json).
|
||||||
|
|
||||||
|
## InfluxDB
|
||||||
|
|
||||||
|
Already added to this project is [node-red-contrib-influxdb](https://flows.nodered.org/node/node-red-contrib-influxdb). You can use it's nodes to write and query data from an InfluxDB time series database. These nodes support both InfluxDB 1.x and InfluxDb 2.0 databases. At the time of this writing we are using [version 2.6 of InfluxDB on port 8086](http://admin:adminadmin@localhost:8086).
|
||||||
|
|
||||||
|
In Node-RED we will be passing the power consumption number through MQTT.
|
||||||
|
|
||||||
|
![Overview](./docs/images/influx-flow.png)
|
||||||
|
|
||||||
|
By default this will be passed as a string, so we need to create a function to convert it into a Number before storing it in InfluxDB.
|
||||||
|
|
||||||
|
Add a function node to the page and put the following code into the node:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
msg.payload = Number(msg.payload)
|
||||||
|
return msg;
|
||||||
|
```
|
||||||
|
|
||||||
|
![Function](./docs/images/influx-function.png)
|
||||||
|
|
||||||
|
You can forward this message to InfluxDB.
|
||||||
|
|
||||||
|
![Influx Node](./docs/images/influx-node.png)
|
||||||
|
|
||||||
|
The `URL`of our InfluxDB is `http://influxdb:8086`. In InfluxDB you have to create a `token` to connect: [Load Data -> API Tokens](http://localhost:8086/orgs/721027680173bf2f/load-data/tokens).
|
||||||
|
|
||||||
|
![Influx Create Token](./docs/images/influx-create-token.png)
|
||||||
|
|
||||||
|
You can use this `token` to create a connection in Node-RED.
|
||||||
|
|
||||||
|
![Influx Connection](./docs/images/influx-connection.png)
|
||||||
|
|
||||||
|
Then the measurements should be visible in [Influx Data Explorer](http://localhost:8086/orgs/721027680173bf2f/data-explorer?bucket=test).
|
||||||
|
|
||||||
|
![Influx Data Explorer](./docs/images/influx-data-explorer.png)
|
||||||
|
|
||||||
|
As the data is now stored in Influx, [let's create a dashboard in Grafana](../dashboard/README.md).
|
||||||
|
|
||||||
|
# Links
|
||||||
|
|
||||||
|
* [IoT Made Easy with Node-RED and InfluxDB](https://www.influxdata.com/blog/iot-easy-node-red-influxdb/)
|
||||||
|
* A great tutorial can be found at [microcontrollerlab.com](https://microcontrollerslab.com/esp32-mqtt-publish-multiple-sensor-readings-node-red/)
|
||||||
|
|
||||||
|
|
||||||
|
|
BIN
docs/flow/docs/images/1-overview.png
Normal file
After Width: | Height: | Size: 131 KiB |
BIN
docs/flow/docs/images/2-mqtt-node.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
docs/flow/docs/images/3-gauge-node.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
docs/flow/docs/images/4-dashboard-node.png
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
docs/flow/docs/images/5-dashboard.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
docs/flow/docs/images/dashboard.png
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
docs/flow/docs/images/influx-connection.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
docs/flow/docs/images/influx-create-token.png
Normal file
After Width: | Height: | Size: 206 KiB |
BIN
docs/flow/docs/images/influx-data-explorer.png
Normal file
After Width: | Height: | Size: 198 KiB |
BIN
docs/flow/docs/images/influx-flow.png
Normal file
After Width: | Height: | Size: 143 KiB |
BIN
docs/flow/docs/images/influx-function.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
docs/flow/docs/images/influx-node.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
docs/flow/docs/images/node-red-plugins.png
Normal file
After Width: | Height: | Size: 99 KiB |