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.
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.
The plugin supports dashboard variables in the URL and header parameters.
For example, http://localhost:3001/${var}, where ${var} is a dashboard variable.
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.
| Element | Description |
|---|---|
| Date and Time | Drop-down to set and adjust date and time. |
| Disabled | Display values that can't be changed. |
| Number Input | Enter numbers with minimum and maximum options. |
| Number Slider | Slider element with minimum, maximum, and step options. |
| Password Input | Enter sensitive information. |
| Radio Group with Boolean options | Select True or False. |
| Radio Group with Custom options | Provide custom options. |
| Select with Custom options | Similar to Radio Group visualized as drop-down. |
| String Input | Enter any alphanumeric values. |
| Text Area | Multiline text area with an adjustable number of rows for comments and descriptions. |
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.
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.
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.
