volkovlabs / volkovlabs-form-panel Goto Github PK

How to customize the inscriptions (like "Please confirm to update changed values?") in the confirmation window (button names)?
This is useful to localize the interface to other languages (not English).

Each element can be assigned to a specific section.

Hi Team,
I want to capture the Grafana global variables in form elements. For example, Instead of giving an email ID as user input, can we automatically pick it using the Grafana user's email using the global variable option? If possible kindly let me know how can I achieve this. Thank you.

Grafana user email variable: ${__user.email} https://grafana.com/docs/grafana/latest/variables/variable-types/global-variables/#__user

Hi,
I use my own scripts for both initial request and update request. However, I don't know how to update other elements once I select a dropdown element. My use case is that I loaded a list of items. And once I select an item, the rest of the form should load that item properties so I can edit them. However, I still don't know how to call to update the other elements. Is there a hook to listen to the selected element like onChange? or anything like that?

I am trying to initialize a "Select with Custom options" element with Custom Code in the Initial Request. The initial request is '-' and the URL is blank as I am just trying to use data from a Prometheus query. I see that I have the values I want in the data element and I am able to assign them to the element.value fields. But this does not seem to affect the "initial" value which is used to detect changes in the elements and is shown as the "Old Value" in the confirmation table. Is there a way to set the initial value from Custom Code without an Initial Request query

Hi,

One of the examples contains custom code to reload the page after an update. It uses location.reload():

if (response && response.ok) { location.reload(); } else { alert(Error: ${response.status}); }

However, that reloads the whole page. It would be much faster and more elegant if I can reload only the panel for which I submit the update, exactly like what the reset button does. Is this possible? Maybe by triggering the reset button itself?

The slider is not refreshing after updating its value, which seems to be an issue in the Grafana component.

As suggested by @DariaVolkov.

Questions from the YouTube video comment.

To explore using direct data source update.

Is it possible to customize the confirmation panel?

Hi @mikhail-vl,

How can I assign a URL to a button which will navigate to another dashboard instead of the default API endpoints?

The URL assigned to the button contains dashboard parameters that are used for the initial GET request in the navigated dashboard.

Thank you.

Hello,
First off, I love this plugin, thank you for making it, but I did find a issue that is proving to be quite annoying.

I am trying to make changes to some of my custom code under the Initial request field.

However, when I click apply, the changes will not retain. The only way I can get them to retain is if I make some changes to other options, then sometimes it retains. I've tried to find a field I can change that will reliably cause it to update but I've yet to find a reliable pattern.

Grafana build V9.1.6

Thanks for the great plugin.

Hello, I actually get stocked by this error.

I am a NodeRed running on the same machine with Grafana. I am using nodered as may API, I simply want to get what the user inputted in my grafana to my nodered API.
However, I always get error as mentioned above.
In addition, I have a basic authentication on my nodered API, but I don't know where should I add those authentication from Data Manipulation Panel.

Is there a configuration or settings that I need to properly config it?

Thank you.

Hi!

I need to insert a variable from form elements into the query link. How can i do this?

I want do create payload from form elements and then create API call.

Dashboard variables not suitable.

Hello,
I have a doubt about the query synchronization, please take a look a this sequences:

after panel loading (at the begin) I have this sequence:

• query execution having a template variable of Grafana, for example $varOne, and a correct syncronization with the query termination
• call to Init custom code and "data.series" correctly filled

changing $varOne I have this sequence:

• query execution without synchronization with the termination
• immediately call to Init custom code and "data.series" with the previous (initial) values

I'm using Grafana 9.2.1

I would really appreciate a clarification about the load/refresh dynamic.

Thank you,
Fabrizio

Tutorial: https://deno.com/deploy/docs/tutorial-postgres

Unfortunately, it is not clear to me how to configure the panel so that the form could be written back to a MariaDB database? This database is independent from the Grafana database, but runs on the same server. Can you help me with this? I don't understand exactly what steps have to be taken in order to be able to write to the database?

Thank you for your help!

OS: CentOS 7
Grafana: v8.5
with an Apache reverse proxy on local network

If your data manipulation panel could interface with the Amazon Athena data source, one could build complete CRUD operations on S3 stored data without using an API.

For read-only operations, you would only need a table in Glue, which can be auto-created by running a crawler on a bucket containing equal schema .csv files. For complete CRUD, you could still do it as long as the table in Glue is of type Apache Iceberg.

Hello! Can you add an option to attach query to reset button?
My case is: I have Data manipulation widget table with parameters, by clicking on Submit button with POST query I connect to REST API with values of all parameters and get the prediction of ML model.
What I want to add: add a query/ area for it for clicking reset button. If I had it, I can refresh my parameters data from database (only when I want it, by clicking the button).

I tried to use this query as initial one but my data manipulation panel always refreshes even I don't want it. For instance, It is refreshed after clicking submit button, but I don't want such behavior from it.

Plugin was submitted to Grafana for review as Private plugin.
After initial review plugin can be signed with Community signature.

Hi,

I wonder if there is a way to automatically set to "blank" values of all form once the user clicked the "Submit button"?

I found that there is a custom code where you can run after the post request, however I don't know how to access those "form elements" to set their values to be equal to nothing once post request is done, what I only tried is to have an "alert" function which works well.

Thank you.

Regards,
Henjoe

Method OPTIONS can be used to retrieve Initial State and should be added in the plugin.

The custom code has access to the Panel options, the response from the REST API call, form elements, various Grafana services and will be executed after the Initial and Update requests.

Available Parameters:

• options - Panels' options.
• data - Result set of panel queries.
• response - Request's response.
• elements - Form Elements.
• locationService - Grafana's locationService to work with browser location and history.
• templateService - Grafana's templateService provides access to variables and allows to up Time Range.
• onOptionsChange() - Panel options Change handler to refresh panel.
• initialRequest() - Perform the Initial Request to reload panel.

The basic Authentication option is not secure. The preferred way to communicate with REST API will be Proxy Data Source, which supports various authentication methods.

Small file uploads as base64 will be great to add to the panel.

Not able to post the request using direct api created in .netcore
http://localhost:61761/api/Test/{ID}/{Name}/{Email}

Is it possible to interact from with other panels from data manipulation one?
My case is: I send my post query to REST API, get the answer which is shown in the next data manipulation row with prediction label.
But it doesn't look fully distinguishable and that's why i want to highlight my result using stat panel because there I can set the size of query result text etc.

Maybe it's possible by using templateService because it provides access to variables and i can connect my result from data manipulation panel with dashboard variable?

Hello @mikhail-vl,
I have tried elements validation in the Data Manipulation panel it is not showing any popup or warning if a user is entered data above the limits can you help my validation?
below is my panel configuration.

after the first entry all subsequent changes are not saved. This has happened to me on Grafana v9.0.1. I have also tried editing the json directly but when the apply button is pressed the plugin returns to the state of the first insertion

Hi!

How can I create status notification after submit form?
Like this:

With message "Form submitted successfully" + maybe some link or remote data from request response.

TY!

Current Test Coverage is ~40% and needs to be improved to check all input parameters and configuration options.

Hello @mikhail-vl,
I am using an initial GET request to populate the data, all the string fields get populated correctly but date-time field is not properly populated kindly see the below images of actual and expected results. Also unable to open the calendar option to select date-time after the initial GET request is finished.
Actual

Error while selecting the calendar option

Expected

Another concern is, if date-time field is populated in the correct format, is it required to click on Apply button in the calendar (if the calendar issue is fixed)?
Can you please help me with the issues?

Confirmation before Submit will be a great feature to confirm updating of the sensitive configuration.

1. Add description for parameters.
2. Add examples.

Add color translation/color mapping for light and darker colors

I have a very simple GET method that should return data...confirmed using postman but I get the error below when I try to call it from the panel
'FormPanel.tsx:169 Uncaught (in promise) TypeError: Failed to execute 'set' on 'Headers': Invalid name
at eval (FormPanel.tsx:169:15)
at Array.forEach ()
at eval (FormPanel.tsx:168:29)
at s (FormPanel.tsx:2:1)
at Generator.eval [as _invoke] (FormPanel.tsx:2:1)
at Generator.eval [as next] (FormPanel.tsx:2:1)
at Mo (FormPanel.tsx:2:1)
at a (FormPanel.tsx:2:1)
at eval (FormPanel.tsx:2:1)
at new Promise ()'

Code Editor supporting various languages like Javascript, and JSON will be very useful for configuration forms.

Secret Parameter is a part of the latest StoryBook: https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic

Hello Team I am not able to reset panal data using reset button and when i am using date and time as parameter in input panel error is occuring

My http GET return JSON data on the "network/preview" debug tab but I'm not able to get to that JSON in the custom code to populate the data to the drop down list. "console.log(response)" doesn't show this JSON or anything related to the response I see elsewhere. Please help!

Hello,
my panel have a main select and a lot of fields, each select option needs a specific subset of fields and not all.
Is it possible to show/hide programmatically a specific element in order to simplify the user navigation?

Thank you,
Fabrizio

Disabled elements can be used to display previous read-only values for the same id and should not be showed in the confirmation dialog.