CnOps 智能运维与可观测社区
首页开源项目实践文章视频课程常见问答开发者工具STAROps 专题
导航菜单
首页开源项目实践文章视频课程常见问答开发者工具STAROps 专题

CnOps 智能运维与可观测社区

愿景

CnOps 智能运维与可观测社区是一个以"智能运维与可观测"为核心的开放、包容、分享的技术社区,旨在聚集运维专家、开发者和爱好者,共同探讨、学习和分享可观测最佳实践与最新技术,与众多技术社区合作互动,共同探讨交叉领域的技术挑战,推动可观测领域的创新与进步。

内容社区

  • 实践文章
  • 视频课程
  • 开源项目
  • 常见问答
  • 开发者工具

友情链接

  • Prometheus
  • Grafana Lab
  • OpenTelemetry
  • LoongCollector

关注我们

阿里云云原生公众号阿里云云原生
阿里云可观测公众号阿里云可观测

Copyright © 2026 CnOps 社区. All rights reserved.

首页/开源项目/Prometheus/控制台模板
文档目录
表达式浏览器Grafana 对 Prometheus 的支持Perses 对 Prometheus 的支持控制台模板

Prometheus

控制台模板

CAUTION: 从 Prometheus 3.0 开始,控制台模板和库不再与 Prometheus 捆绑提供。如果你希望使用控制台模板,必须通过指定 --web.console.templates 和 --web.console.libraries 命令行标志来提供自己的模板和库。本文档页面保留用于历史参考和展示控制台模板的功能。请注意,Prometheus 2.x...

CAUTION: 从 Prometheus 3.0 开始,控制台模板和库不再与 Prometheus 捆绑提供。如果你希望使用控制台模板,必须通过指定 --web.console.templates 和 --web.console.libraries 命令行标志来提供自己的模板和库。本文档页面保留用于历史参考和展示控制台模板的功能。请注意,Prometheus 2.x 分支中引用的任何控制台库不再维护,可能包含已知的安全漏洞(CVE)。

控制台模板允许使用 Go 模板语言创建任意控制台。这些模板由 Prometheus 服务器提供服务。

控制台模板是创建可以轻松在源代码管理中管理的模板的最强大方式。不过它有学习曲线,因此不熟悉这种监控方式的新用户应该先尝试 Grafana。

入门

Prometheus 附带了一组示例控制台帮助你入门。这些可以在运行中的 Prometheus 上通过 /consoles/index.html.example 访问,如果 Prometheus 正在抓取带有 job="node" 标签的 Node Exporter,则会显示 Node Exporter 控制台。

示例控制台有 5 个部分:

  1. 顶部的导航栏
  2. 左侧的菜单
  3. 底部的时间控件
  4. 中央的主要内容,通常是图表
  5. 右侧的表格

导航栏用于链接到其他系统,例如其他 Prometheus 实例1、文档以及你认为合适的其他内容。菜单用于在同一 Prometheus 服务器内导航,能够快速在另一个标签页中打开控制台以关联信息非常有用。两者都在 console_libraries/menu.lib 中配置。

时间控件允许更改图表的持续时间和范围。控制台 URL 可以共享,对其他人显示相同的图表。

主要内容通常是图表。提供了一个可配置的 JavaScript 图形库,负责从 Prometheus 请求数据,并通过 Rickshaw 进行渲染。

最后,右侧的表格可用于以比图表更紧凑的形式显示统计信息。

控制台示例

这是一个基本的控制台。它在右侧表格中显示任务数量、其中多少是正常运行的、平均 CPU 使用率和平均内存使用率。主要内容区域有一个每秒查询数的图表。

{{template "head" .}}

{{template "prom_right_table_head"}}
<tr>
  <th>MyJob</th>
  <th>{{ template "prom_query_drilldown" (args "sum(up{job='myjob'})") }}
      / {{ template "prom_query_drilldown" (args "count(up{job='myjob'})") }}
  </th>
</tr>
<tr>
  <td>CPU</td>
  <td>{{ template "prom_query_drilldown" (args
      "avg by(job)(rate(process_cpu_seconds_total{job='myjob'}[5m]))"
      "s/s" "humanizeNoSmallPrefix") }}
  </td>
</tr>
<tr>
  <td>Memory</td>
  <td>{{ template "prom_query_drilldown" (args
       "avg by(job)(process_resident_memory_bytes{job='myjob'})"
       "B" "humanize1024") }}
  </td>
</tr>
{{template "prom_right_table_tail"}}


{{template "prom_content_head" .}}
<h1>MyJob</h1>

<h3>Queries</h3>
<div id="queryGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#queryGraph"),
  expr: "sum(rate(http_query_count{job='myjob'}[5m]))",
  name: "Queries",
  yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
  yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
  yUnits: "/s",
  yTitle: "Queries"
})
</script>

{{template "prom_content_tail" .}}

{{template "tail"}}

prom_right_table_head 和 prom_right_table_tail 模板包含右侧表格。这是可选的。

prom_query_drilldown 是一个模板,它将计算传递给它的表达式,格式化结果,并链接到表达式浏览器中的该表达式。第一个参数是表达式。第二个参数是使用的单位。第三个参数是输出的格式化方式。只有第一个参数是必需的。

prom_query_drilldown 的第三个参数的有效输出格式:

  • 未指定:默认 Go 显示输出。
  • humanize:使用公制前缀显示结果。
  • humanizeNoSmallPrefix:对于绝对值大于 1 的结果,使用公制前缀显示。对于绝对值小于 1 的结果,显示 3 位有效数字。这对于避免 humanize 可能产生的毫查询/秒等单位很有用。
  • humanize1024:以 1024 而非 1000 为基数显示人类可读的结果。通常与 B 作为第二个参数一起使用,以产生 KiB 和 MiB 等单位。
  • printf.3g:显示 3 位有效数字。

可以定义自定义格式。参见 prom.lib 中的示例。

图形库

图形库的调用方式为:

<div id="queryGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#queryGraph"),
  expr: "sum(rate(http_query_count{job='myjob'}[5m]))"
})
</script>

head 模板加载所需的 Javascript 和 CSS。

图形库的参数:

名称 描述
expr 必需。要绘图的表达式。可以是列表。
node 必需。要渲染到的 DOM 节点。
duration 可选。图表的持续时间。默认为 1 小时。
endTime 可选。图表结束的 Unix 时间戳。默认为当前时间。
width 可选。图表的宽度,不包括标题。默认为自动检测。
height 可选。图表的高度,不包括标题和图例。默认为 200 像素。
min 可选。x 轴最小值。默认为最低数据值。
max 可选。y 轴最大值。默认为最高数据值。
renderer 可选。图表类型。选项为 line 和 area(堆叠图)。默认为 line。
name 可选。图例和悬停详情中的绘图标题。如果传递字符串,[[ label ]] 将被替换为标签值。如果传递函数,它将接收一个标签映射并应返回名称字符串。可以是列表。
xTitle 可选。x 轴标题。默认为 Time。
yUnits 可选。y 轴单位。默认为空。
yTitle 可选。y 轴标题。默认为空。
yAxisFormatter 可选。y 轴的数字格式化器。默认为 PromConsole.NumberFormatter.humanize。
yHoverFormatter 可选。悬停详情的数字格式化器。默认为 PromConsole.NumberFormatter.humanizeExact。
colorScheme 可选。绘图使用的颜色方案。可以是十六进制颜色代码列表或 Rickshaw 支持的颜色方案名称之一。默认为 'colorwheel'。

如果 expr 和 name 都是列表,它们的长度必须相同。名称将应用于相应表达式的绘图。

yAxisFormatter 和 yHoverFormatter 的有效选项:

  • PromConsole.NumberFormatter.humanize:使用公制前缀格式化。
  • PromConsole.NumberFormatter.humanizeNoSmallPrefix:对于绝对值大于 1 的值,使用公制前缀格式化。对于绝对值小于 1 的值,格式化为 3 位有效数字。这对于避免 PromConsole.NumberFormatter.humanize 可能产生的毫查询/秒等单位很有用。
  • PromConsole.NumberFormatter.humanize1024:以 1024 而非 1000 为基数格式化人类可读的结果。

文章大纲