Plugins 〉Data Manipulation

Panel
community

Data Manipulation

  • Overview
  • Installation
  • Change log
  • Related content

Data Manipulation Panel plugin for Grafana

Form Panel

Grafana 9 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.

Data Manipulation Plugin for Grafana | Manual data entering and User input into 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 Marketplace 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.

Architecture

How to Manipulate Data using Grafana dashboard | API Node.js Server and Deno Deploy Project

Diagram

API

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.
  • json - Parsed JSON from the Initial Request.
  • 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 update Time Range.
  • onOptionsChange() - Panel options Change handler to refresh panel.
  • initialRequest() - Perform the Initial Request to reload panel.

Panel

To learn more about parameters you can log them in the Browser Console:

console.log(options, data, response, elements, locationService, templateService);

Reload page after update request or show error

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

Perform Initial Request after update request or show error

if (response && response.ok) {
  initialRequest();
} else {
  alert(`Error: ${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.

Static and dynamic interface elements of Data Manipulation plugin | DML using data source in Grafana

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); });

Update Request

Select Update Request as - and set Custom Code:

/**
 * Set body
 */
const body = {};
options.elements.forEach((element) => {
  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.

NGINX

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.
  • Star the repository to show your support.

License

  • Apache License Version 2.0, see LICENSE.

Installing Data Manipulation on Grafana Cloud:

For more information, visit the docs on plugin installation.

Change Log

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