Input form in Grafana using Dynamic Text

[Evgeny243]

Hi, I am new to that part of programming and would greatly appreciate your help. I need to create a panel with several input fields and a button: Name, task description and time period, that would show who is using certain service. Once a "confirm" button is pressed that data would get displayed in the same panel in big bold font. It is simple but I can't get it to work - I have to be displayed as button, however there is no execution (e.g. "alert" command does not do anything). As I understand if "sanitizing" were ON, the button would not appear, rather I would see my code on the panel. Since that is not the case, I conclude that "sanitize" is not my problem. Thanks, Evgeny

[mikhail-vl]

@Evgeny243 Sanitizing is tricky and depends on the Grafana version. In some versions, it was not rendered correctly. In some, it does not execute the action.

Where do you store the input data? in the database or the local state of the browser? If in the browser, nobody will see it except you.

Have you looked at the Data Manipulation panel? It's designed to create this kind of form. We recently published a YouTube tutorial to get started: https://volkovlabs.io/plugins/volkovlabs-form-panel/

[Evgeny243]

Thanks Mikhail. The problem was indeed in the sanitizing. My goal is to create a "user info" in the form along with a button that would call a pop-up form with several text-input fields. On pressing "submit" button the "user info" should be updated with the new information. For the first step I tried the code attache in the snapshot, but nothing happens. Clearly I am using wrong syntax. Could you point me to a library of examples, or documentation where proper syntax and all necessary functions (as applied to Dynamic Text) are explained? Thank you!

[Evgeny243]

Mikhail, I sorted it out. Everything works. Thank you for your response.

[mikhail-vl]

@Evgeny243 Great. What was it? Do you mind to share your code and screenshots, we can highlight in the upcoming blog post and documentation.

[Evgeny243]

Here is the code for Content:

---

User name

Task description

Time start/end

Input User

Update

---

For Java script:

---

openForm = () => { document.getElementById("InputForm").classList.toggle("active") document.getElementById("new_name").value = "" document.getElementById("new_task").value = "" document.getElementById("new_time").value = "" }

updateFcn = () => { A = document.getElementById("new_name").value; document.getElementById("user_name").textContent = A; B = document.getElementById("new_task").value; document.getElementById("task").textContent = B; C = document.getElementById("new_time").value; document.getElementById("time").textContent = C; document.getElementById("InputForm").classList.toggle("active"); }

---

For CSS style:

---

.static_form { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: bold; font-size: 20px; color: rgb(108, 204, 108); }

.popup .content { position: absolute; top: 1%; left: 1%; transform: translate(-50%, -150%) scale(0); width: 150px; height: 170px; z-index: 2; text-align: left; padding: 10px; border-radius: 5px; background: #bbbaba; font-size: 15px; z-index: 1; }

.popup.active .content { transition: all 300ms ease-in-out; transform: translate(-7%, -7%) scale(1); }

---

And the snapshot:

It is an ugly duckling, but it does what I needed.

[Evgeny243]

I have a follow-up question - I am investigating a possibility to save the logged data along with a timestamp into a database (influxdb). I guess for that the Data Manipulation plugin is the best. I don't quite understand the role of the Rest API server. Is there an example of how to forward data from Data Manipulation plugin to influxdb or similar database?

[mikhail-vl]

@Evgeny243 Thank you for providing the solution.

There are multiple API implementations in the documentation for DM: https://volkovlabs.io/plugins/volkovlabs-form-panel/servers/influx/

[Evgeny243]

Mikhail, I've been struggling for two days but can not get the Manipulation Data plugin to read/display any data from influxdb. That example that you mentioned did not help unfortunately. I do not understand the syntax. There are 4 request options: "-", Data source, Query and GET. Doesn't matter which one I choose, it does not communicate with the database. Could you walk me through how to do it? I have url address of the database, I have Token (but no password), I have query command which works in a regular grafana panel and such thing as "uid". What should be written in Initial request and in Update request? And if present - the initial/Update payload?

I'd guess the simplest should be to select Data Source = Influxdb, but then I am not sure what information should be pplaced into the Custom code, and in what format it should be placed...

[Evgeny243]

@mikhail-vl I am still trying to get this plugin to work, but to no avail. It would be super helpful to have more detailed examples, which includes methods of Initial Request, Custom Code for corresponding method, Update Request if needed, and necessary codes for Payloads. Without this plugin the data is successfully getting loaded from my Influxdb. It is also loaded when in the plugin I select method "Query", and fill-up the left-bottom part as usual. But otherwise I see nothing happening. My current try is to use method Data Source - InfluxDB. In the Custom Code I type:

const query = from(bucket: "telem") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r["_measurement"] == "analog_io") |> filter(fn: (r) => r["_field"] == "PD voltage") |> last() ;

const url = http://influxdb.xxxxx.com:8086/api/v2/query?org=xxxxxxxxx

const resp = fetch(url, { method: "POST", headers: { "Content-Type": "application/vnd.flux", Accept: "application/csv", Authorization: "xxxxxxxxxxxxxxxxxxxxxxxxx", }, body: query, }) .catch((error) => { console.error(error); }) .then((resp) => { console.log(resp); });

And I am not sure what should be in the Initial Request Payload. I am also not sure how to introduce refID so that I can refer to it from the Form Elements. Thank you!

[Evgeny243]

@mikhail-vl If I write in the Initial Request Payload command "return { Response }" then I get the following error message: Request {"status":400,"statusText":"Bad Request","data":{"results":{"A":{"error":"invalid: failed to decode request body: request body requires either query or AST","status":500,"frames":[{"schema":{"refId":"A","meta":{"typeVersion":[0,0]},"fields":[]},"data":{"values":[]}}]}}},"config":{"method":"POST","url":"api/ds/query","data":{"queries":[{"datasourceId":1,"refId":"A"}]},"retry":0,"headers":{"X-Grafana-Org-Id":1},"hideFromInspector":false}}

[mikhail-vl]

@Evgeny243 Please don't mix issues between plugins.

If you still have an issue with Data Manipulation and have not opened an issue in the repository, please open and we will take a look.