Data Manipulation Form panel plugin for @grafana.

Overview

Data Manipulation Form panel plugin for Grafana

Form Panel

Grafana 8 CI codecov Language grade: JavaScript

Introduction

The Data Manipulation Form Panel is a plugin for Grafana that can be used to insert, update application data, and modify configuration directly from your Grafana dashboard.

Requirements

Grafana 8.0 is required.

Getting Started

Data Manipulation Form panel is under development and not included in the Grafana Marketplace yet. It can be installed manually from our private repository or downloaded directly from the GitHub repository:

grafana-cli --repo https://volkovlabs.io/plugins plugins install volkovlabs-form-panel

Features

  • Provides functionality to create customizable forms with elements:
    • Code Editor
    • Date and Time
    • Read-only (Disabled)
    • Number Input
    • Number Slider
    • Password Input
    • Radio Group with Boolean options
    • Radio Group with Custom options
    • Select with Custom options
    • String Input
    • Text Area
  • Supports the Custom Code for Initial and Update requests.
  • Allows to specify GET request to get initial values and POST, PUT, PATCH request to send values updated in the form.
  • Allows to add Header fields to Initial and Update requests.
  • Allows to customize Submit, Reset buttons and form layout.
  • Allows to split form elements into sections.

API

Feedback

We love to hear from users, developers, and the whole community interested in this plugin. These are various ways to get in touch with us:

  • Ask a question, request a new feature, and file a bug with GitHub issues.
  • Star the repository to show your support.

Contributing

  • Fork the repository.
  • Find an issue to work on and submit a pull request.
  • Could not find an issue? Look for documentation, bugs, typos, and missing features.

License

  • Apache License Version 2.0, see LICENSE.
Comments
  • how exactly to get the response data from the initial request http GET for form element?

    how exactly to get the response data from the initial request http GET for form element?

    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!

    enhancement 
    opened by lynhnn 11
  • Consider adding a

    Consider adding a "getUpdatedValues()" function to determine changed form values

    Consider adding a function called something like "getUpdatedValues()" that returns a container of the update values in the form {'id1':'newValue1', 'id2':'newValue2', ...}. This would basically match the table you build for the confirmation dialog. It would help to optimize when building the "Update Request". Currently you must send all form elements in the update when only a select few have changed. I don't believe there is any other way to determine what has changed in the form.

    -Ray

    enhancement 
    opened by rantinray 10
  • edit fields after first entry

    edit fields after first entry

    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

    question 
    opened by fabiotorta 10
  • Initialize element value from a Data Source query

    Initialize element value from a Data Source query

    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

    enhancement 
    opened by rantinray 8
  • [Question] Automatic set to blank values after post request

    [Question] Automatic set to blank values after post request

    Hi,

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

    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.

    image

    Thank you.

    Regards, Henjoe

    question 
    opened by henjoe 8
  • The provided

    The provided "server-pg" (API server) scripts or Grafana plugin don't work as expected

    The provided "server-pg" (API server) scripts or Grafana plugin don't work as expected.

    Grafana version: v9.2.2 volkovlabs-form-panel version: v2.7.0 Postgresql version: v14.5.0 The "server-pg" (API server) scripts are from: https://github.com/VolkovLabs/volkovlabs-form-panel/tree/main/server-pg

    "server-pg" (API server) successfully up and running, on publicly available server, so it is possible to connect to the API Server directly:

    [INFO wait] --------------------------------------------------------
    [INFO wait] docker-compose-wait 2.9.0
    [INFO wait] ---------------------------
    [DEBUG wait] Starting with configuration:
    [DEBUG wait] - Hosts to be waiting for: []
    [DEBUG wait] - Paths to be waiting for: []
    [DEBUG wait] - Timeout before failure: 30 seconds
    [DEBUG wait] - TCP connection timeout before retry: 5 seconds
    [DEBUG wait] - Sleeping time before checking for hosts/paths availability: 0 seconds
    [DEBUG wait] - Sleeping time once all hosts/paths are available: 0 seconds
    [DEBUG wait] - Sleeping time between retries: 1 seconds
    [DEBUG wait] --------------------------------------------------------
    [INFO wait] docker-compose-wait - Everything's fine, the application can now start!
    [INFO wait] --------------------------------------------------------
    Server for Postgres is running on port 3001...
    

    The API server is accessible from the local machine and Grafana instance:

    nc -zv <api_server_ip> 3001
    <api_server_ip> (<api_server_ip>:3001) open
    

    Created necessary db table by porvided sql script: https://github.com/VolkovLabs/volkovlabs-form-panel/blob/main/server-pg/feedback.sql

    Configured the Data Manipulation plugin: 2022-12-08 182358 image

    Submit and there is such error:

    Request
    TypeError: Cannot read properties of undefined (reading 'status')
    

    2022-12-08 182113

    In the API server log file no any new records. The database also has no new records.

    Tried to change in Update Request section Content-Type from Application/json to Text/plain, the same - no success.

    What's wrong here?

    question 
    opened by maleksan 7
  • reload only the panel, not the entire page after update

    reload only the panel, not the entire page after update

    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?

    enhancement 
    opened by absvm 6
  • Error when using the GET method

    Error when using the GET method

    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 ()'

    bug 
    opened by greg-violette 6
  • http localhost:3000 has been blocked CORS

    http localhost:3000 has been blocked CORS

    Hello, I actually get stocked by this error. image

    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.

    question 
    opened by henjoe 6
  • Initial GET request date time formatting

    Initial GET request date time formatting

    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 Screenshot from 2022-10-07 14-12-56

    Error while selecting the calendar option Screenshot from 2022-10-07 14-13-16

    Expected Screenshot from 2022-10-07 14-14-11

    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?

    bug 
    opened by Castlesai 4
  • Is it possible to interact from with other panels from data manipulation one?

    Is it possible to interact from with other panels from data manipulation one?

    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?

    enhancement question 
    opened by agriii927 4
  • Create a configuration option to only call the Initial Request on dashboard load?

    Create a configuration option to only call the Initial Request on dashboard load?

    Is it possible to configure the Data Manipulation panel to only call the Initial Request on dashboard load? I have this panel on a dashboard that has other panels that require regular updates and I have an auto refresh interval set. Right now the Initial Request gets called at every refresh. The problem with this is that if the user is changing values on the Data Manipulation panel, they all get reset based on the Initial Request being called every refresh cycle.

    If this is not already configurable, could you consider adding this as a configuration option? Sort of like the drop down when configuring a dashboard query variable. Something like:

    Initial Request Refresh: "On dashboard load"/"default"
    

    I am not actually sure what the default should be called or how you would describe it.

    Thanks -Ray

    opened by rantinray 0
  • Changes to custom code fields will not save unless other fields have changed.

    Changes to custom code fields will not save unless other fields have changed.

    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. image 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.

    bug priority 
    opened by westonforbes 5
  • Text of the inscriptions

    Text of the inscriptions

    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).

    enhancement 
    opened by parumsancto 2
  • Doubt about query synchronization

    Doubt about query synchronization

    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

    question 
    opened by ftasso 4
Releases(v2.7.0)
Owner
Volkov Labs
Custom plugin development for Grafana
Volkov Labs
Apache ECharts Panel plugin for Grafana

Apache ECharts Panel plugin for Grafana Introduction The ECharts Panel is a plugin for Grafana that allows to visualize Apache ECharts on your Grafana

Volkov Labs 36 Dec 23, 2022
A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch screens with a resolution of 1024x600 connected to a Raspberry Pi.

EDStatusPanel A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch scr

marcus-s 24 Oct 4, 2022
A modern client panel for the Pterodactyl® panel, made by Wrible Development.

Dashboardsy A modern client panel for the Pterodactyl® panel, made by Wrible Development. Support Discord: https://discord.gg/zVcDkSZNu7 Screenshots S

Wrible Development 23 Jan 1, 2023
RSS/Atom data source plugin for @grafana.

RSS/Atom data source plugin for Grafana Introduction The RSS/Atom data source is a plugin for Grafana that retrieves RSS/Atom feeds and allows to visu

Volkov Labs 9 Jan 2, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
The Trino datasource allows to query and visualize Trino data from within Grafana.

Trino Grafana Data Source Plugin The Trino datasource allows to query and visualize Trino data from within Grafana. Getting started Drop this into Gra

Starburst 13 Nov 3, 2022
Balena Application plugin for @grafana.

Balena Application plugin for Grafana Introduction The Balena Application plugin for Grafana allows to display device information and manage services

Volkov Labs 15 Jan 2, 2023
FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection.

FormGear is a framework engine for dynamic form creation and complex form processing and validation for data collection. It is designed to work across

Ignatius Aditya Setyadi 91 Dec 27, 2022
A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

appleple 159 Dec 10, 2022
Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Gino 4 Sep 26, 2021
Displays environment variables on your Grafana dashboards

Displays environment variables on your Grafana dashboards Introduction The Environment data source is a plugin for Grafana that returns environment va

Volkov Labs 7 Dec 26, 2022
Add GeoIP && UA-Parser support for Grafana Loki

loki-enhance-middleware loki-enhance-middleware hijacks log push requests sent to loki and modifies it. Deploy docker-compose.yaml services: loki:

WangLei 5 Dec 10, 2022
jQuery plugin for color manipulation and animation support.

jQuery Color Supported jQuery versions: 1.8+ Browser Support jQuery Color 3.x supports the following browsers: Desktop: Chrome: (Current - 1) and Curr

jQuery 1.6k Dec 5, 2022
Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.

?? Auth Form Design ?? Features 1. Check Your Password Strength 2. Can Use Suggested Password 3. Enjoy Responsive Design Getting Started with Create R

Samarpan Dasgupta 2 Dec 24, 2022
This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Kanshi TANAIKE 18 Oct 23, 2022
The jQuery plugin for validation and post form data to server

NiceForm The jQuery plugin for validation and post form data to server (http://ducdhm.github.io/jquery.niceform/) Shortcuts Dependencies Rules Configu

Duc Doan (Bobby) 17 Jul 27, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022