Prometheus學習系列（二十九）之可視化-控制檯模板

語言模板建立任意的console。這些由Prometheus服務提供。

控制檯模板是建立可在源代碼管理中輕鬆管理的模板的最強大方法。 雖然有一個學習曲線，因此對這種監控方式不熟悉的用戶應首先嚐試Grafana。

1、Getting started

Prometheus附帶一套示例，讓您學習。 這些能夠在運行的Prometheus上的/consoles/index.html.example中找到，若是Prometheus正在使用job="node"標籤來抓取節點導出器，則會顯示節點導出器控制檯。

這個例子控制檯包括5部分：

1. 在頂部的導航欄
2. 左邊的一個菜單
3. 底部的時間控制
4. 在中心的主內容，一般是圖表
5. 右邊的表格

導航欄用於指向其餘系統的連接，例如其餘Prometheis，文檔以及其餘任何對您有意義的內容。 該菜單用於在同一個Prometheus服務器內導航，這對於可以在另外一個選項卡中快速打開控制檯以關聯信息很是有用。 二者都在console_libraries/menu.lib中配置。

時間控制容許更改圖形的持續時間和範圍。 控制檯URL能夠共享，併爲其餘人顯示相同的圖表。

主要內容一般是圖表。 提供了一個可配置的JavaScript圖形庫，能夠處理來自Prometheus的請求數據，並經過Rickshaw進行渲染。

最後，右側的表格可用於以比圖形更緊湊的形式顯示統計數據。

2、例子控制檯

這是一個基本的控制檯。 它顯示了右側表中的任務數，其中有多少，平均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的第三個參數的有效輸出格式：

• 未指定：默認轉到顯示輸出。
• humanize：使用指標前綴顯示結果。
• humanizeNoSmallPrefix：對於大於1的絕對值，使用度量標準前綴顯示結果。對於小於1的絕對值，顯示3位有效數字。這對於避免能夠經過人性化生成的諸如每秒毫微秒的單位是有用的。
• humanize1024：使用1024而不是1000的基數顯示人性化結果。這一般與B一塊兒用做生成KiB和MiB等單位的第二個參數。
• printf.3g：顯示3位有效數字。

能夠定義自定義格式。有關示例，請參閱prom.lib。

3、圖庫

圖庫被調用爲：

<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	可選. 圖表結束時的Unixtime。 默認爲如今。
width	可選. 圖表的寬度，不包括標題。 默認爲自動檢測。
height	可選. 圖表的高度，不包括標題和圖例。 默認爲200像素。
min	可選. 最小x軸值。 默認爲最低數據值。
max	可選. 最小y軸值。 默認爲最高數據值。
renderer	可選. 圖表類型。 選項line和area（堆疊圖）。 默認爲行。
name	可選. 圖例和懸停細節中的圖表標題。 若是傳遞了一個字符串，[[label]]將被替換爲標籤值。 若是傳遞了一個函數，它將傳遞一個標籤映射，並應該將該名稱做爲字符串返回。 能夠是一個清單。
xTitle	可選. x軸的標題。 默認爲Time。
yUnits	可選. y軸的單位。 默認爲空。
yTitle	可選. y軸的標題。 默認爲空。
yAxisFormatter	可選. y軸的數字格式化程序。 默認爲PromConsole.NumberFormatter.humanize。
yHoverFormatter	可選. 懸停細節的數字格式化程序。 默認爲PromConsole.NumberFormatter.humanizeExact。
colorScheme	可選. 圖表使用的配色方案。 能夠是十六進制顏色代碼列表，也能夠是人力車支持的顏色方案名稱之一。 默認爲colorwheel。

若是expr和name都是列表，則它們的長度必須相同。 該名稱將應用於相應表達式的圖。

yAxisFormatter和yHoverFormatter的有效選項：

• PromConsole.NumberFormatter.humanize：使用度量標準前綴的格式。
• PromConsole.NumberFormatter.humanizeNoSmallPrefix：對於大於1的絕對值，使用度量標準前綴進行格式化。 對於小於1的絕對值，請使用3位有效數字格式。 這對於避免PromConsole.NumberFormatter.humanize能夠生成的每秒毫秒數等單位頗有用。
• PromConsole.NumberFormatter.humanize1024：使用1024而不是1000的基數格式化人性化結果。

4、連接：

Prometheus官網地址：prometheus.io/ 個人Github：github.com/Alrights/pr…