Button to send action to Node-Red

Grafana Dashboards
1

Grafana 10.2.0 under Docker

  • What are you trying to achieve? I’m trying to find a way to have a button in my dashboard that once clicked will send a message to Node-Red to carry out some down stream activity.

  • How are you trying to achieve it? Grafana and Node-Red containers within a Docker Stack Is there a way to achieve this?

2

Check out this plugin that might enable you to do this

2 Likes
3

@yosiasz Data Manipulation is a good option, especially when you need to add additional data.

The Canvas panel in the latest Grafana 10.2 allows to have a button for REST API calls. It may work for your use case as well.

2 Likes
4

Thanks @yosiasz and @mikhailvolkov for your responses on this we have succeeded with the new Grafana Canvas panel and enabling CORS in Node-Red

2 Likes
5

could you please share sample grafana panel / node-red flow?

6

Screenshot 2023-12-20 at 14.16.06
Screenshot 2023-12-20 at 14.16.06653×869 45.4 KB

{
“annotations”: {
“list”: [
{
“builtIn”: 1,
“datasource”: {
“type”: “grafana”,
“uid”: “-- Grafana --”
},
“enable”: true,
“hide”: true,
“iconColor”: “rgba(0, 211, 255, 1)”,
“name”: “Annotations & Alerts”,
“type”: “dashboard”
}
]
},
“editable”: true,
“fiscalYearStartMonth”: 0,
“graphTooltip”: 0,
“id”: 20,
“links”: ,
“liveNow”: false,
“panels”: [
{
“datasource”: {
“type”: “influxdb”,
“uid”: “PE4A5F5CBBE7FA712”
},
“fieldConfig”: {
“defaults”: {
“color”: {
“mode”: “thresholds”
},
“mappings”: ,
“thresholds”: {
“mode”: “absolute”,
“steps”: [
{
“color”: “green”,
“value”: null
},
{
“color”: “red”,
“value”: 80
}
]
}
},
“overrides”:
},
“gridPos”: {
“h”: 3,
“w”: 3,
“x”: 0,
“y”: 0
},
“id”: 1,
“options”: {
“inlineEditing”: true,
“root”: {
“background”: {
“color”: {
“fixed”: “transparent”
}
},
“border”: {
“color”: {
“fixed”: “dark-green”
}
},
“elements”: [
{
“background”: {
“color”: {
“fixed”: “transparent”
}
},
“border”: {
“color”: {
“fixed”: “dark-green”
}
},
“config”: {
“align”: “center”,
“api”: {
“contentType”: “application/json”,
“data”: “{"test": "test_sucess"}”,
“endpoint”: “http://localhost:1880/test”,
“headerParams”: ,
“method”: “POST”,
“queryParams”:
},
“color”: {
“fixed”: “#F0F4FD”
},
“size”: 14,
“style”: {
“variant”: “primary”
},
“text”: {
“fixed”: “Test Button”,
“mode”: “fixed”
}
},
“connections”: ,
“constraint”: {
“horizontal”: “left”,
“vertical”: “top”
},
“name”: “Element 1”,
“placement”: {
“height”: 45.000003814697266,
“left”: 14,
“top”: 3,
“width”: 150
},
“type”: “button”
}
],
“name”: “Element 1701351955486”,
“type”: “frame”
},
“showAdvancedTypes”: true
},
“pluginVersion”: “10.2.0”,
“title”: “Panel Title”,
“type”: “canvas”
}
],
“refresh”: “”,
“schemaVersion”: 38,
“tags”: ,
“templating”: {
“list”:
},
“time”: {
“from”: “now-6h”,
“to”: “now”
},
“timepicker”: {},
“timezone”: “”,
“title”: “Brew Wip2”,
“uid”: “a8737acd-6494-43cb-b105-63a709e4acac”,
“version”: 1,
“weekStart”: “”
}

Screenshot 2023-12-20 at 14.14.55
Screenshot 2023-12-20 at 14.14.551034×350 34.8 KB

[
{
“id”: “72d27e3d68ea3261”,
“type”: “http in”,
“z”: “aaf907ac0c1cb001”,
“name”: “”,
“url”: “/test”,
“method”: “post”,
“upload”: false,
“swaggerDoc”: “”,
“x”: 80,
“y”: 680,
“wires”: [
[
“9d89db61d4696c55”,
“0e043d31dc68f897”
]
]
},
{
“id”: “9d89db61d4696c55”,
“type”: “debug”,
“z”: “aaf907ac0c1cb001”,
“name”: “debug 1”,
“active”: true,
“tosidebar”: true,
“console”: false,
“tostatus”: false,
“complete”: “true”,
“targetType”: “full”,
“statusVal”: “”,
“statusType”: “auto”,
“x”: 100,
“y”: 740,
“wires”:
}
]

7

Thank you very much for these examples and also for mentioning that CORS should be enabled in Node-red by uncommenting these lines:

httpNodeCors: {
    origin: "*",
    methods: "GET,PUT,POST,DELETE"
},
2 Likes
8

This topic is very helpful. Thanks for share