Plugins 〉Data Manipulation
Data Manipulation
Data Manipulation Panel for Grafana
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.5+, Grafana 9.0+ is required for version 2.X.
- Grafana 8.0+ is required for version 1.X.
Getting Started
Data Manipulation panel can be installed from the Grafana Catalog or use the grafana-cli
tool to install from the command line:
grafana-cli 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.
- Allows to request confirmation before update request.
- Allows to send all or only updated elements in the Payload.
- Allows to display Success and Error notifications from the Custom Code.
- Supports Code Editor suggestions for Available Parameters.
Architecture
Diagram
Custom Code
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.initial
- Parsed values from the Initial Request.elements
- Form Elements.locationService
- Grafana'slocationService
to work with browser location and history.templateService
- Grafana'stemplateService
provides access to variables and allows to update Time Range.onOptionsChange()
- Change handler to refresh panel.initialRequest()
- Perform the Initial Request to reload panel.setInitial({})
- Allows to specify the initial values for Custom Initial Requests toHighlight changed values
andRequire Confirmation
.notifySuccess(['Header', 'Message'])
- Display successful notification.notifyError(['Header', 'Error Message'])
- Display error notification.
To learn more about parameters you can log them in the Browser Console:
console.log(options, data, response, elements, locationService, templateService);
Refresh Dashboard after update request or show error
if (response && response.ok) {
notifySuccess(['Update', 'Values updated successfully.']);
locationService.reload();
} else {
notifyError(['Update', `An error occured updating values: ${response.status}`]);
}
Update variable after update request to interact with other panels
if (response && response.ok) {
response.json().then((resp) => {
locationService.partial({ 'var-name': resp['name'] }, true);
});
}
Perform Initial Request after update request or show error
if (response && response.ok) {
notifySuccess(['Update', 'Values updated successfully.']);
initialRequest();
} else {
notifyError(['Update', `An error occured updating values: ${response.status}`]);
}
Clear elements' values after Submit or on Reset button click
elements.map((element) => {
if (element.id === 'name') {
element.value = '';
}
});
onOptionsChange(options);
onOptionsChange
handler is required to update the panel.
Dashboard Variables
Dashboard and Global variables will be replaced automatically in:
- URL for Initial and Update requests
- Header Parameters' values
- Request body, which contains elements' values
You can find global built-in variables in the Grafana documentation.
Dynamic form elements
Using the custom code you can update elements or element's value and options from any data source.
Fill options of the icon
element from series icons
with icon_id
and title
columns
const icons = data.series.find((serie) => serie.refId === 'icons');
const iconSelect = elements.find((element) => element.id === 'icon');
if (icons?.fields.length) {
const ids = icons.fields.find((f) => f.name === ‘icon_id’).values.buffer;
const titles = icons.fields.find((f) => f.name === ’title’).values.buffer;
iconSelect.options = titles.map((value, index) => {
return { label: value, value: ids[index] };
});
}
onOptionsChange(options);
Update all form elements from data sources
const feedback = data.series.find((serie) => serie.refId === 'Feedback');
const typeOptions = data.series.find((serie) => serie.refId === 'Types');
if (feedback?.fields.length) {
const ids = feedback.fields.find((f) => f.name === ‘id’).values.buffer;
const titles = feedback.fields.find((f) => f.name === ’title’).values.buffer;
const types = feedback.fields.find((f) => f.name === ’type’).values.buffer;
/**
- Set Elements
*/
elements = ids.map((id, index) => {
return { id, title: titles[index], type: types[index] };
});
/**
- Find Type element
*/
const typeSelect = elements.find((element) => element.id === ’type’);
if (typeSelect && typeOptions?.fields.length) {
const labels = typeOptions.fields.find((f) => f.name === ’label’).values.buffer;
const values = typeOptions.fields.find((f) => f.name === ‘value’).values.buffer;
/**
* Update Types
*/
typeSelect.options = labels.map((label, index) => {
return { label, value: values[index] };
});
}
/**
- Update Panel Options
*/
onOptionsChange({ …options, elements });
}
Custom Requests
Data Manipulation panel allows to create your own Initial and Update requests using Custom Code.
Initial Request
Select Initial Request as -
and set Custom Code:
const bucketsSelect = elements.find((element) => element.id === 'buckets');
/**
- Set URL
*/
const url =
http://localhost:3001/test
;
/**
-
Fetch
*/
const resp = fetch(url, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’,
‘PRIVATE-TOKEN’: ‘$token’,
},
})
.catch((error) => {
console.error(error);
})
.then(async (resp) => {
const body = await resp.json();
bucketsSelect.options = body.buckets.map((value) => {
return { label: value, value };
});
onOptionsChange(options);
});
To support Highlight changed values
and Require Confirmation
the Custom Code should use setInitial({})
function to update initial
values:
setInitial({value: 99, name: 'Test'})
Update Request
Select Update Request as -
and set Custom Code. Depends on the selected Payload options it will add all or only updated values.
/**
* Set body
*/
const body = {};
options.elements.forEach((element) => {
if (!options.update.updatedOnly) {
body[element.id] = element.value;
return;
}
/**
- Skip not updated elements
*/
if (element.value === initial[element.id]) {
return;
}
body[element.id] = element.value;
});
/**
- Set URL
*/
const url =
http://localhost:3001/${body['name']}
;
/**
- Fetch
*/
const resp = fetch(url, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘PRIVATE-TOKEN’: ‘$token’,
},
body: JSON.stringify(body),
})
.catch((error) => {
console.error(error);
})
.then((resp) => {
console.log(resp);
});
NGINX
We recommend running Grafana behind NGINX reverse proxy for an additional security layer. The reverse proxy also allows us to expose additional API endpoints and static files in the same domain, which makes it CORS-ready.
Read more in How to connect the Data Manipulation plugin for Grafana to API Server.
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.
- Sponsor our open-source plugins for Grafana with GitHub Sponsor.
- Star the repository to show your support.
License
- Apache License Version 2.0, see LICENSE.
Grafana Cloud Pro
- $25 / user / month and includes a free trial for new users
- Available with a Grafana Cloud Pro plan
- Access to 1 Enterprise plugin
- Fully managed service (not available to self-manage)
Grafana Cloud Advanced / Grafana Enterprise
- Available with a Grafana Cloud Advanced plan or Grafana Enterprise license
- Access to all Enterprise plugins
- Run fully managed or self-manage on your own infrastructure
Installing Data Manipulation on Grafana Cloud:
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
For more information, visit the docs on plugin installation.
Installing on a local Grafana:
For local instances, plugins are installed and updated via a simple CLI command. Plugins are not updated automatically, however you will be notified when updates are available right within your Grafana.
1. Install the Panel
Use the grafana-cli tool to install Data Manipulation from the commandline:
grafana-cli plugins install
The plugin will be installed into your grafana plugins directory; the default is /var/lib/grafana/plugins. More information on the cli tool.
Alternatively, you can manually download the .zip file for your architecture below and unpack it into your grafana plugins directory.
Alternatively, you can manually download the .zip file and unpack it into your grafana plugins directory.
2. Add the Panel to a Dashboard
Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.
To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.
Change Log
2.7.0 (2022-11-10)
Features / Enhancements
- Update to Grafana 9.2.2 (#113)
- Update CI to upload signed artifacts (#116)
- Allow to send all or updated only values in Payload (#116)
- Add Initial values parameter to Update Request parameters (#117)
- Add Status notification after submit form (#98)
- Add Monaco Code Editor suggestions for available parameters (#88)
2.6.0 (2022-10-23)
Features / Enhancements
- Add Compatibility Check Workflow (#92)
- Update to Grafana 9.1.6 (#92)
- Add Custom Code to update variable after update request (#106)
- Add Number Input and Slider min, max validation (#95)
- Initialize element value from a Data Source query (#105)
- Update CI to Node 16 and Synchronize with Release workflow (#109)
Bug fixes
- Initial GET request date time formatting (#99)
2.5.0 (2022-09-10)
Features / Enhancements
- Add Request Header check (#85)
- Expose
initialRequest()
in Custom Code to reload panel (#89) - Set
json
as response data from Initial Request (#90) - Update to Grafana 9.1.4 (#91)
2.4.0 (2022-08-31)
Features / Enhancements
- Update to Grafana 9.1.1 (#72)
- Explain how to use Dashboard Variables in README (#73)
- Add onOptionsChange in examples to update the panel (#75)
- Add variables in URL to call from form elements (#78)
- Add Custom Update Request to README (#79)
- Add Deno Deploy Playground server and dashboard (#80)
- Add "How to Manipulate Data using Grafana dashboard" video in README (#80)
- Show Title instead of Id in the Confirmation Panel (#81)
- Avoid showing confirmation for disabled elements (#77)
- Improve Test Coverage (#21)
2.3.0 (2022-08-11)
Breaking changes
- Signed as Community Plugin.
Features / Enhancements
- Update Sample code in README (#67)
- Updated to be included in the Grafana Marketplace (#68)
2.2.0 (2022-08-09)
Features / Enhancements
- Update to Grafana 9.0.6 (#63)
- Allow to get Elements Initial Value and Configuration from Data Source (#22)
- Update Alert when no elements defined (#66)
Bug fixes
- Number Slider is not updated properly (#18)
2.1.0 (2022-07-17)
Features / Enhancements
- Rebuild based on 9.0.3 (#58)
- Automatic Code Editor Formatting (#59)
- Explain Custom code in Readme (#60)
- Update YouTube link with tutorial in README #61
2.0.0 (2022-06-17)
Breaking changes
- Requires Grafana 8.3+ and 9.0+
Features / Enhancements
- Rebuild based on 9.0.0 (#53)
1.4.0 (2022-05-30)
Features / Enhancements
- Allow to update Element Width (#50)
- Add Highlight for changed values (#51)
- Add Confirmation before Submit (#52)
1.3.0 (2022-05-22)
Features / Enhancements
- Update Architecture Diagram (#44)
- Changing colors on Submit is not working properly (#43)
- Update layout to have sections for Form Fields (#47)
- Add None Request for Initial and Update requests (#48)
- Add Code Editor Element for Configuration Forms (#23)
1.2.0 (2022-05-19)
Features / Enhancements
- Add Label Width and Tooltip (#39)
- Add Server API with Postgres for Feedback Dashboard (#36)
- Update Input Parameters to Form Elements (#41)
1.1.0 (2022-05-12)
Features / Enhancements
- Added Disabled Element (#24)
- Added ability to move elements up and down (#19)
- Added Split Disabled layout for Input/Output (#27)
- Added Interpolate Variables (#28)
- Added Min and Max for Numbers (#29)
- Added Unit Label (#31)
- Added Header Parameters (#32)
- Added Password Input (#33)
- Subscribed to Refresh Events (#30)
1.0.0 (2022-05-11)
Features / Enhancements
- Initial release based on the Volkov Labs Panel template 1.5.0