Grafana Version and Operating System: I am using Grafana version 10.0.2 on Rasbian Operating System.
Objective: I am attempting to implement a feature in my Grafana Data Manipulation plugin form where the Submit button should be temporarily disabled upon receiving a successful response from a Node-Red server. This will prevent users from making repeated submissions and provide feedback on the success of their request.
Approach: I have implemented the following approach to achieve this functionality:
- When the user clicks the Submit button in my Grafana Data Manipulation plugin form, a request is sent to a Node-Red server.
- Upon receiving a response from the server, I aim to perform the following actions:
- If the response is successful (
response.ok), I intend to:- Disable the Submit button to prevent multiple submissions.
- Display a success notification to inform the user that their values were updated successfully.
- Wait for a few seconds to allow the pH controller to stabilize.
- After the delay, re-enable the Submit button to allow the user to make another submission.
- If the response indicates an error, I should:
- Display an error notification to inform the user of the issue.
Current Status: The code I’ve written to achieve this functionality looks like this:
Custom Code in Update Request.
if (response && response.ok) {
// Display a success message for values update
notifySuccess(['Update', 'Values updated successfully.']);
// Display a message indicating that the controller is controlling pH
notifySuccess(['pH Controller', 'Wait for a few seconds until pH is set to the desired pH']);
// Disable the submit button
var submitButton = document.querySelector('button[aria-label="Send"]');
if (submitButton) {
submitButton.disabled = true;
}
// Simulate a delay before enabling the submit button (adjust the delay time as needed)
setTimeout(function () {
if (submitButton) {
submitButton.disabled = false; // Enable the submit button
}
// Display a message indicating that the controller is ready for the next update
notifySuccess(['pH Controller', 'Controller is ready for the next update.']);
// Reload the page (you can uncomment this if needed)
locationService.reload();
}, 20000); // Adjust the delay time as needed (in milliseconds)
} else {
// Display an error message
notifyError(['Update', 'An error occurred updating values.']);
}
Expectation: I expect that upon receiving a successful response, the Submit button will be disabled, a success notification will be displayed, and after a brief delay, the button will be re-enabled. In the case of an error response, an error notification will be shown.
Configuration: I am using the Grafana Data Manipulation plugin, and the relevant configuration for the form and Submit button is as follows:
{
"datasource": {
"type": "influxdb",
"uid": "ccbb3313-a521-40d4-9e26-42a8bea8f3fb"
},
"gridPos": {
"h": 11,
"w": 7,
"x": 0,
"y": 24
},
"id": 7,
"options": {
"layout": {
"variant": "single",
"padding": 20,
"sections": []
},
"initial": {
"method": "-",
"contentType": "application/json",
"code": "console.log(data, response, initial, elements)",
"highlight": false,
"highlightColor": "red"
},
"update": {
"method": "POST",
"contentType": "application/json",
"updatedOnly": false,
"code": "//if (response && response.ok) {\n// notifySuccess(['Update', 'Values updated successfully.']);\n//locationService.reload();\n// notifySuccess(['pH Controller', 'Wait for few seconds until pH is set to desired pH']);\n//} else {\n// notifyError(['Update', 'An error occured updating values.']);\n//}\n\nif (response && response.ok) {\n // Display a success message for values update\n notifySuccess(['Update', 'Values updated successfully.']);\n\n // Display a message indicating that the controller is controlling pH\n notifySuccess(['pH Controller', 'Wait for a few seconds until pH is set to the desired pH']);\n\n // Disable the submit button\n var submitButton = document.querySelector('button[aria-label=\"Send\"]');\n if (submitButton) {\n submitButton.disabled = true;\n }\n\n // Simulate a delay before enabling the submit button (adjust the delay time as needed)\n setTimeout(function () {\n if (submitButton) {\n submitButton.disabled = false; // Enable the submit button\n }\n\n // Display a message indicating that the controller is ready for the next update\n notifySuccess(['pH Controller', 'Controller is ready for the next update.']);\n\n // Reload the page (you can uncomment this if needed)\n locationService.reload();\n }, 20000); // Adjust the delay time as needed (in milliseconds)\n} else {\n // Display an error message\n notifyError(['Update', 'An error occurred updating values.']);\n}\n\n",
"confirm": false,
"url": "http://192.168.178.22:1880/setpoint"
},
"buttonGroup": {
"orientation": "left",
"size": "md"
},
"submit": {
"variant": "custom",
"foregroundColor": "yellow",
"backgroundColor": "dark-green",
"icon": "line",
"text": "Send"
},
"reset": {
"variant": "primary",
"foregroundColor": "yellow",
"backgroundColor": "purple",
"icon": "process",
"text": "Reset"
},
"elements": [
{
"id": "ph_value",
"labelWidth": 12,
"max": 15,
"min": 0,
"section": "",
"step": 0.01,
"title": "Desired pH",
"tooltip": "",
"type": "slider",
"value": 4.23
},
{
"id": "volume",
"labelWidth": 20,
"section": "",
"title": "Solution Volume(in ml) ",
"tooltip": "",
"type": "number",
"unit": "ml",
"value": "1493",
"width": 20
},
{
"id": "motor_id",
"labelWidth": 20,
"options": [
{
"label": "Motor 1",
"type": "number",
"value": 1
},
{
"label": "Motor 2",
"type": "number",
"value": 2
},
{
"label": "Motor 3",
"type": "number",
"value": 3
},
{
"label": "Motor 4",
"type": "number",
"value": 4
}
],
"section": "",
"title": "Select Motor",
"tooltip": "",
"type": "select",
"value": 2,
"width": 20
},
{
"id": "set_on_time",
"labelWidth": 20,
"section": "",
"title": "Set On Time",
"tooltip": "",
"type": "number",
"unit": "seconds",
"value": "7",
"width": 20
},
{
"id": "set_off_time",
"labelWidth": 20,
"section": "",
"title": "Set Off Time",
"tooltip": "",
"type": "number",
"unit": "seconds",
"value": "3",
"width": 20
}
]
},
"title": "pH Dosing Control",
"type": "volkovlabs-form-panel"
}
Errors: I have not encountered any error, but the button is not being disabled.
I appreciate any assistance and guidance from the Grafana community to help me resolve this issue. Thank you!
