Skip to main content

Data Manipulation plugin for Grafana

· Updated on February 14, 2023
Mikhail Volkov

Working on a commercial project, we created a Data Manipulation panel plugin that can be used to insert, update application data, and modify configuration directly from your Grafana dashboard.

The Data Manipulation panel has been requested by the community multiple times. We decided to open-source it and submit it for review to the Grafana team to include in the Grafana Catalog.

The Data Manipulation Panel is a conceptually new plugin for Grafana. It is the first plugin that allows inserting and updating application data, as well as modifying configuration directly from your Grafana dashboard.

Manual data entering and User input into Dashboard.

Architecture

Panel options allow you to specify the URL for GET requests to receive initial values and POST, PUT, or PATCH requests to update values sent as a JSON. Header parameters can be added to secure your REST API calls.

Data Manipulation panel uses GET, POST/PUT request to interact with API Server.
Data Manipulation panel uses GET, POST/PUT request to interact with API Server.

The plugin supports dashboard variables in the URL and header parameters.

For example, http://localhost:3001/${var}, where ${var} is a dashboard variable.

Panel options allow specifying URL, header parameters, and Custom code.
Panel options allow specifying URL, header parameters, and Custom code.

Javascript Code

You can add the custom Javascript code, which will be executed after the browser's various requests, e.g. GET, POST, PUT, and PATCH.

For example, we added the browser's location reload in the provided screenshot after a successful POST request.

The custom code has access to

  • Panel options.
  • Response from the REST API call.
  • Form elements.
  • Grafana services.
  • Variables are replaced automatically.

Check out the documentation for all parameters.

Form Elements

The Data Manipulation Form panel is actively improving and already supports this.

ElementDescription
Date and TimeDrop-down to set and adjust date and time.
DisabledDisplay values that can't be changed.
Number InputEnter numbers with minimum and maximum options.
Number SliderSlider element with minimum, maximum, and step options.
Password InputEnter sensitive information.
Radio Group with Boolean optionsSelect True or False.
Radio Group with Custom optionsProvide custom options.
Select with Custom optionsSimilar to Radio Group visualized as drop-down.
String InputEnter any alphanumeric values.
Text AreaMultiline text area with an adjustable number of rows for comments and descriptions.
Form elements can be moved up and down and provide individual options.
Form elements can be moved up and down and provide individual options.

We plan to include Code Editor, File, and Image Upload elements in upcoming versions.

If you are interested in additional elements, please open an issue in the repository.

Customization

The form provides Submit and Reset buttons which can be customized to use

  • Theme-specific sizes.
  • Types.
  • Icons.
  • Flexible combination of background and foreground colors.
Submit and Reset buttons can be customized to use theme-specific types and icons.
Submit and Reset buttons can be customized to use theme-specific types and icons.

Form options can be displayed in a single column or split into multiple columns, and each element can be assigned to a specific column. This feature will be available in an upcoming version. The current version allows splitting editable and disabled elements only.

Feedback dashboard

Let's take a look at the example of using the Data Manipulation panel to submit comments, issues, and feature requests integrated into the Application plugin.

Feedback dashboard with Data Manipulation panel and native Grafana visualizations.
Feedback dashboard with Data Manipulation panel and native Grafana visualizations.

For a seamless user experience, the feedback form allows users to provide us with valuable feedback for the application. All submissions are stored in the database and sent out using various communication channels.