Variable Panel 2.0.0

We are happy to announce the release of the Variable Panel 2.0.0. This release includes the following updates:

• Added handling of the enter key for the Text Box variable type.
• Added a clear(empty) value for the multi-value variables.
• Added support for the Grafana key-value variable format for all display modes.
• Significant performance improvements.

Grafana Catalog

The plugin was updated in Grafana Catalog on October 18, 2023.

Variable panel 1.7.0 and 2.0.0 for Grafana.

Enter the key for the Text Box type

Hitting the enter key after typing a text value in the Text box variable type will trigger the dashboard refresh. Before implementing this feature, a user had to use a mouse cursor to click outside the box for the variable to take effect.

You can use the enter key for the variable to take effect.

Improved Performance

Up to 10,000 records will work swiftly without significant performance degradation. For up to 50,000 records, you might notice a slight one- to two-second delay. We achieved that improvement by using a table virtualization approach.

The illustration below displays the performance statistics we collected in the Chrome extensions to confirm the approach is working.

Initial load time with 50,000 items in the table view.

Empty value in Multi-value Variables

This feature works for the following Minimize and Button display modes.

Empty Value allowed for the Minimize and Button Display modes.

In previous versions, after a user had selected an item in a Multi-value variable, there was no way to unselect all values.

Multi-value setting for dashboard variables.

For this feature to work, you must enable the Empty Value parameter in the Variable section.

When Empty value is enabled, a user can unselect all variable values.

Key-values format in Variables

We introduced this feature in version 1.7.0 and it was limited to the Table/Tree View. Starting from this release all display modes (Table/Tree View, Minimize, Button) support the key-value variable format.

A Grafana variable can be composed of a key and value to make it possible to join data sets by IDs(key) while displaying user-friendly names(value).

In the illustration below, screen 1, the city variable is created with three key-value pairs.

Chicago:1, New York:2, Tampa:3

Screen 2 is a dashboard view where an end-user sees only city names. After the selection is made (here, New York:2), the variable carries a value equal to 2.

From there the city variable's value can be used in the queries for other panels, screen 3.

Example of the key-value variable format in the Variable panel.

Getting Started

The Variable panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.

For the latter, please use the following command.

grafana-cli plugins install volkovlabs-variable-panel

YouTube Tutorial

The Variable panel builds on top of the regular dashboard variables. It allows you to have dashboard filters in a separate panel which you can place anywhere on the dashboard.

The variable panel offers you single- and multi-variable layouts along with an advanced Tree View.

Demonstrates the Variable panel functionality.

Release Notes

Features / Enhancements

• Update variable option label for parent items in tree view (#62)
• Add handling enter and escape keys for Text Variable (#69)
• Add table virtualization to improve performance (#64, #74)
• Clear value for the multi-choice variable (#66)
• Update to Plugin Tools 2.1.1 (#72)
• Use Grafana Access Policy to sign plugin (#72)
• Update to Grafana 10.1.5 (#73)

Bugfixes

• Fix key:value option selection for Minimize and Button views (#75)

Feedback

We're looking forward to hearing from you. You can use different ways to get in touch with us.

• Ask a question, request a new feature, and file a bug with GitHub issues.
• Subscribe to our YouTube Channel and leave your comments.
• Sponsor our open-source plugins for Grafana with GitHub Sponsor.
• Support our project by starring the repository.