插件 〉Datatable 面板


开发者

Brian Gann (bkgann@gmail.com)

注册以接收不定期产品新闻和更新



面板
社区

Datatable 面板

  • 概览
  • 安装
  • 变更日志
  • 相关内容

Grafana Datatable 面板

Marketplace Downloads License

Twitter Follow Release Build Known Vulnerabilities Maintainability Test Coverage

此面板插件为 Grafana 8.x/9.x/10.x 提供了一个 Datatables.net 表格面板

截图

已启用分页

Default Paging

已启用滚动

Scrolling

带分页的浅色主题

Light Theme with Paging

带行号和紧凑样式

Numbered and Compact Rows

选项

选项标签页

Options

与内置表格面板相同的选项

Datatable 选项标签页

Datatable Options

表格显示选项

  • 字体大小 - 设置表格内容的字体大小
  • 滚动 - 切换滚动或分页
  • 分页选项
    • 每页行数 - 分页启用时显示的行数
    • 分页类型 - 多种导航选项

列别名

  • 覆盖列显示的名称

列宽度提示

  • 提供百分比或像素的宽度“提示”(100px 或 10%)。注意:表格会根据需要自动调整大小,但会使用提供的提示。

列排序

  • 按任意数量的列升序/降序对表格排序。

表格选项

  • 行号 - 切换显示行号
  • 长度更改启用 - 左上角下拉菜单,用于显示其他页面大小
  • 搜索启用 - 切换以允许搜索表格内容(已启用正则表达式)
  • 信息 - 在表格左下方显示“显示 X 条中的 N 条条目”
  • 单元格边框 - 显示每个单元格周围的边框(不能与行边框同时启用)
  • 行边框 - 显示行之间的边框
  • 紧凑行 - 使用更少的内边距,用于更紧密的数据显示
  • 条纹行 - 非彩色行将按奇/偶数显示“条纹”
  • 排序列 - 高亮显示用于排序的列
  • 悬停 - 鼠标悬停时高亮显示行

主题设置

  • 基本主题是目前唯一的选项,将添加更多选项

阈值设置

基于行的阈值着色

Thresholding with Row Coloring

基于单元格的阈值着色

Thresholding with Cell Coloring

基于单元格阈值的着色

Thresholding with Value Coloring

行列阈值着色

此选项将行的颜色设置为该行所有单元格中找到的“最高”阈值。

它还根据阈值设置每个单元格的颜色(您可以看出哪些列实际超过了阈值)。

这意味着 - 一行可以有一个整体颜色,而每个单元格指示其实际的阈值颜色。

Thresholding with RowColumn1

Thresholding with RowColumn2

包含行计数器的行列阈值着色

与上面相同,但包含行计数器

Thresholding with RowColumn including row count

功能

  • 与内置 Grafana 表格面板功能对等
  • 行着色使用所有列中的“最高”阈值颜色
  • 新增“行列”阈值着色选项:将颜色设置为该行所有单元格中找到的“最高”阈值。同时根据阈值设置每个单元格的颜色。这意味着 - 一行可以有一个整体颜色,而每个单元格指示其实际的阈值颜色。
  • 设置行的字体大小
  • 滚动
  • 分页
    • 预设页面大小
    • 多种分页类型
    • 页面大小下拉菜单
  • 行号对过滤有响应
  • 可搜索的表格内容(过滤),启用正则表达式
  • 列名可以设置别名
  • 行文本中的 URL 可以“点击”
  • 行可以有关联的点击 URL
  • 多列排序
  • 当列宽于面板时启用水平滚动

待办事项

  • [+] 列不起作用

构建

此插件依赖于 Yarn,典型的构建顺序如下:

yarn install
yarn build

对于开发,您可以运行:

yarn install
yarn watch

代码将被解析,如果构建通过且没有错误,则复制到“dist”目录。

Docker 支持

包含一个 docker-compose.yml 文件,方便开发和测试,只需运行:

docker-compose up

然后浏览到 (https://:3000)

RPM

包含一个 spec 文件,方便基于 RPM 的部署,生成时运行:

make rpm

外部依赖项

  • Grafana 6.x/7.x

构建依赖项

  • yarn

致谢

此面板基于 GrafanaLabs 的“Table”面板

在 Grafana Cloud 上安装 Datatable 面板

更多信息请访问插件安装文档。

变更日志

此项目的所有显著变更将记录在此文件中。

[1.0.4] - 2023-09-11

  • 兼容 v10.x 的更新
  • 包已更新
  • 签名已修复
  • 小错误修复
  • 注意:此插件将很快迁移到 React!

[1.0.3] - 2020-12-05

  • 新功能:添加了 mark 插件以高亮搜索结果中的匹配文本(来自 PR #98)
  • 新功能:数字右对齐选项(默认为开启)
  • 修复:正则表达式格式化器为空时崩溃:Issue #124
  • 插件现已签名

[1.0.2] - 2020-06-26

  • 新功能:列过滤选项
  • 排序现在正常工作 问题:#104
  • 行/列着色再次正常工作 问题:#100
  • 格式化正常工作(一般外观问题)问题:#105
  • 现在可以在旧版本 Grafana 中加载 问题:#97
  • 链接中的模板变量现在可以引用同一行号中其他单元格的内容(问题:#87)

[1.0.1] - 2020-05-02

  • 从旧版本 Grafana 中拉取 file_export 以实现兼容性
  • 添加依赖 file-saver,需要我的 file_export
  • v7 不再提供面板中的 isUTC 设置,测试并默认为 false

[1.0.0] - 2020-04-21

  • 添加了使用正交数据选项按值而非格式化值排序的选项
  • 移除 moment 包
  • 更新为使用新的 @grafana/toolkit 构建过程
  • 包已更新
  • 修复:设置显示行号时,列索引排序错误
  • 修复:浅色主题搜索区域现在更清晰可见
  • 新功能:时间宏 $__from、$__to、$__keepFrom 将在可点击 URL 中替换

[0.0.9] - 2019-09-07

  • 修复 stringToJsRegex 引用错误

[0.0.8] - 2019-09-07

  • 更新包

[0.0.7] - 2019-07-26

新功能/错误修复由贡献者 jmp0x00 提供,感谢!!转换为 TypeScript 更新了所有包 CircleCI 添加到发布流程

(之前)变更日志

版本变更
0.0.1首次发布
0.0.2新功能:添加了单元格或行链接到另一页的选项
新功能:支持表格内的可点击链接
错误修复:修复了缺失的 CSS 文件
错误修复:当 Grafana 有子路径时,CSS 文件现在可以加载
新功能:添加了多列排序 - 按任意数量的列升序/降序排序
新功能:列别名 - 修改数据源发送的列名
新功能:列宽度提示 - 为指定列建议宽度
0.0.3错误修复:保存状态现在应该可以工作了 - datatable 构造函数中的选项有误
新功能:添加了剪贴板/CSV/PDF/Excel/打印导出选项
错误修复:非 JSON 数据源的列现在可以设置别名
错误修复:无数据时现在会清空表格(问题 #5)
0.0.4新功能:当列数较多导致表格宽度超过面板宽度时,现在会自动水平滚动
(问题 #6)
0.0.5错误修复:Grafana > 4.6 的 SystemJS 路径更改
0.0.6错误修复:v5 兼容性
1.0.0更新包并转换为 toolkit