• console template（控制模板）
    • Getting started
    • 例子控制台
    • 模板部分不翻译了，建议大家用Grafana，不喜欢后台服务渲染模板，还是让前端的童鞋去做数据呈现工作吧

    console template（控制模板）

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

    console模板是最强有力的方法，它可以在源码控制中创建容易管理的模板。我们可以首先尝试Grafana，减少学习成本。

    Getting started

    Prometheus提供了一系列的控制模板来帮助您。这些可以在Prometheus服务上的console/index.html.example中找到，如果Prometheus服务正在删除带有标签job="node"的Node Exporter, 则会显示NodeExporter控制台

    这个例子控制台包括5部分：

    1. 在顶部的导航栏
    2. 左边的一个菜单
    3. 底部的时间控制
    4. 在中心的主内容，通常是图表
    5. 右边的表格

    这个导航栏是链接到其他系统，例如Prometheus其他方面的文档，以及其他任何使你明白的。该菜单用于在同一个Prometheus服务中导航，它可以快速在另一个tar中打开一个控制台。这些都是在console_libraries/menu.lib中配置。

    时间控制台允许持久性和图表范围的改变。控制台URLs能够被分享，并且在其他的控制台中显示相同的图表。

    主要内容通常是图表。这里有一个可配置的JavaScript图表库，它可以处理来自Prometheus服务的请求，并通过Rickshaw来渲染

    最后，在右边的表格可以用笔图表更紧凑的形式显示统计信息。

    例子控制台

    这是一个最基本的控制台。它显示任务的数量，其中CPU平均使用率、以及右侧表中的平均内存使用率。主要内容具有每秒查询数据。

    1. {{template "head" .}}
    3. {{template "prom_right_table_head"}}
    4. <tr>
    5.   <th>MyJob</th>
    6.   <th>{{ template "prom_query_drilldown" (args "sum(up{job='myjob'})") }}
    7.       / {{ template "prom_query_drilldown" (args "count(up{job='myjob'})") }}
    8.   </th>
    9. </tr>
    10. <tr>
    11.   <td>CPU</td>
    12.   <td>{{ template "prom_query_drilldown" (args
    13.       "avg by(job)(rate(process_cpu_seconds_total{job='myjob'}[5m]))"
    14.       "s/s" "humanizeNoSmallPrefix") }}
    15.   </td>
    16. </tr>
    17. <tr>
    18.   <td>Memory</td>
    19.   <td>{{ template "prom_query_drilldown" (args
    20.        "avg by(job)(process_resident_memory_bytes{job='myjob'})"
    21.        "B" "humanize1024") }}
    22.   </td>
    23. </tr>
    24. {{template "prom_right_table_tail"}}
    27. {{template "prom_content_head" .}}
    28. <h1>MyJob</h1>
    30. <h3>Queries</h3>
    31. <div id="queryGraph"></div>
    32. <script>
    33. new PromConsole.Graph({
    34.   node: document.querySelector("#queryGraph"),
    35.   expr: "sum(rate(http_query_count{job='myjob'}[5m]))",
    36.   name: "Queries",
    37.   yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
    38.   yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
    39.   yUnits: "/s",
    40.   yTitle: "Queries"
    41. })
    42. </script>
    44. {{template "prom_content_tail" .}}
    46. {{template "tail"}}

    模板部分不翻译了，建议大家用Grafana，不喜欢后台服务渲染模板，还是让前端的童鞋去做数据呈现工作吧