Plugins 〉Palindrome.js
Palindrome.js
Grafana Palindrome.js Panel
Visualize Prometheus metrics or other datasources in 3D with the Grafana Palindrome.js panel. This panel is based over the SMILE Palindrome.js library.
🎯 Features and usage
Palindrome.js is composed of layers defined by the user. Each layer can contain from 1 to n metrics. Metrics ranges are described through minimum, median, and maximum values, which are inputs from the user. The current value is obtained from the time series database. The overall Palindrome.js shape and color reflect the current values evolving in their user described ranges. For further details, please refer to the Palindrome.js documentation.
This panel should be connected to one of these supported data sources:
- Prometheus
- InfluxDB v2
- Graphite
Once done, you can define layers and metrics using code queries, following this format:
<query> <comment-sign>label: <label>, layer: <layerName>, ranges: [<min value>, <med value>, <max value>]
Notes:
- Palindrome.js metadata should be inside a comment section.
- Comment signs can be
#
or//
. label
metadata is optional
Example for Prometheus data source:
node_disk_io_now{device="nvme0n1"} #label: ssdMetric, layer: systemMetrics, ranges: [0, 50, 100]
- Once you've finished typing queries, click on
Run queries
, and the 3D object will appear.
Example for InfluxDB v2 data source:
from(bucket: "Palindrome.js")
|> range(start:-1m)
|> filter(fn: (r) => r["_measurement"] == "cpu")
|> filter(fn: (r) => r["_field"] == "usage_system")
|> filter(fn: (r) => r["cpu"] == "cpu0")
//layer: Container Metrics, ranges: [0, 3, 10]
Example for Graphite data source:
carbon.agents.*-a.pointsPerUpdate #layer: layer2, ranges: [0, 1, 3]
After setting up queries, two fields will be populated: Palindrome Data Structure
and Palindrome Configuration
:
Palindrome Data Structure: This is the data structure of Palindrome.js based on the metrics entered by the user. It is a read-only text area (editable through query comments).
Palindrome Configuration: This field displays the current configuration used to display the 3D object. It is editable. For more information, please refer to our API reference.
Palindrome.js is also available in a light theme version.
.
⚡ Realtime Palindrome.js
📺 Creation demo
📜 License
This project is licensed under Apache2.0.