Grafana Palindrome.js 面板

使用 Grafana Palindrome.js 面板将 Prometheus 指标或其他数据源在 3D 视图中可视化。此面板基于 SMILE Palindrome.js 库。

🎯 功能和用法

Palindrome.js 由用户定义的层组成。每个层可以包含 1 到 n 个指标。指标范围通过最小值、中值和最大值来描述，这些都是用户输入的值。当前值从时序数据库中获取。整体 Palindrome.js 的形状和颜色反映了当前值在用户描述的范围内变化。更多详情请参考 Palindrome.js 文档。

此面板应连接到以下受支持的数据源之一：

• Prometheus
• InfluxDB v2
• Graphite

完成后，您可以按照以下格式使用代码查询定义层和指标：

<query> <comment-sign>label: <label>, layer: <layerName>, ranges: [<min value>, <med value>, <max value>]

注意

• Palindrome.js 元数据应位于注释部分内。
• 注释符号可以是 # 或 //。
• label 元数据是可选的

Prometheus 数据源示例:

node_disk_io_now{device="nvme0n1"} #label: ssdMetric, layer: systemMetrics, ranges: [0, 50, 100]

• 输入完查询后，点击 Run queries，3D 对象就会出现。

InfluxDB v2 数据源示例:

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]

Graphite 数据源示例:

carbon.agents.*-a.pointsPerUpdate #layer: layer2, ranges: [0, 1, 3]

设置完查询后，将填充两个字段：Palindrome Data Structure 和 Palindrome Configuration

• Palindrome Data Structure: 这是基于用户输入的指标生成的 Palindrome.js 数据结构。这是一个只读文本区域（可通过查询注释编辑）。

• Palindrome Configuration: 此字段显示用于显示 3D 对象的当前配置。它是可编辑的。更多信息请参考我们的 API 参考。

Palindrome.js 也提供了浅色主题版本。

.

⚡ 实时 Palindrome.js

📺 创建演示

📜 许可

本项目根据 Apache2.0 许可协议授权。