mirror of https://github.com/prometheus/prometheus
Browse Source
This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59pull/428/head
Brian Brazil
10 years ago
9 changed files with 1211 additions and 0 deletions
@ -0,0 +1,56 @@ |
|||||||
|
{{/* vim: set ft=html: */}} |
||||||
|
|
||||||
|
{{/* Navbar, should be passed . */}} |
||||||
|
{{ define "navbar" }} |
||||||
|
<div class="navbar navbar-inverse navbar-static-top"> |
||||||
|
<div class="navbar-inner"> |
||||||
|
<ul class="navbar-nav nav"> |
||||||
|
<a class="brand" href="/">Prometheus</a> |
||||||
|
<li><a href="/alerts">Alerts</a></li> |
||||||
|
<!-- Add in navbar links here --> |
||||||
|
<li><a href="https://pagerduty.com/">PagerDuty</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
{{/* LHS menu, should be passed . */}} |
||||||
|
{{ define "menu" }} |
||||||
|
<div class="prom_lhs_menu"> |
||||||
|
<ul> |
||||||
|
{{ $dot := . }} |
||||||
|
|
||||||
|
{{ template "_menuItem" (args . "index.html.example" "Overview") }} |
||||||
|
{{ template "_menuItem" (args . "node.html" "Node") }} |
||||||
|
{{ if match "^node" .Path }} |
||||||
|
<ul> |
||||||
|
{{ if .Params.instance }} |
||||||
|
<li {{ if eq .Path "node-overview.html" }}class="prom_lhs_menu_selected"{{end}}> |
||||||
|
<a href="node-overview.html?instance={{ .Params.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</a> |
||||||
|
</li> |
||||||
|
<ul> |
||||||
|
<li {{ if eq .Path "node-cpu.html" }}class="prom_lhs_menu_selected"{{end}}> |
||||||
|
<a href="node-cpu.html?instance={{ .Params.instance }}">CPU</a> |
||||||
|
</li> |
||||||
|
<li {{ if eq .Path "node-disk.html" }}class="prom_lhs_menu_selected"{{end}}> |
||||||
|
<a href="node-disk.html?instance={{ .Params.instance }}">Disk</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
{{ else }} |
||||||
|
{{ range query "up{job='node'}" | sortByLabel "instance" }} |
||||||
|
<li><a href="node-overview.html?instance={{ .Labels.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Labels.instance }}</a></li> |
||||||
|
{{ end }} |
||||||
|
{{ end }} |
||||||
|
</ul> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
|
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
{{/* Helper, pass (args . path name) */}} |
||||||
|
{{ define "_menuItem" }} |
||||||
|
<li {{ if eq .arg0.Path .arg1 }} class="prom_lhs_menu_selected" {{ end }}><a href="{{ .arg1 }}">{{ .arg2 }}</a></li> |
||||||
|
{{ end }} |
||||||
|
|
||||||
@ -0,0 +1,112 @@ |
|||||||
|
{{/* vim: set ft=html: */}} |
||||||
|
{{/* Load Prometheus console library JS/CSS. Should go in <head> */}} |
||||||
|
{{define "prom_console_head"}} |
||||||
|
<link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css"> |
||||||
|
<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.css"> |
||||||
|
<link type="text/css" rel="stylesheet" href="/static/css/prom_console.css"> |
||||||
|
<script src="/static/vendor/rickshaw/vendor/d3.min.js"></script> |
||||||
|
<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script> |
||||||
|
<script src="/static/vendor/rickshaw/rickshaw.min.js"></script> |
||||||
|
<script src="/static/vendor/js/jquery.min.js"></script> |
||||||
|
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script> |
||||||
|
<script src="/static/js/prom_console.js"></script> |
||||||
|
{{end}} |
||||||
|
|
||||||
|
{{/* Top of all pages. */}} |
||||||
|
{{define "head"}} |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
{{template "prom_console_head"}} |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
{{template "navbar" .}} |
||||||
|
{{template "menu" .}} |
||||||
|
{{end}} |
||||||
|
|
||||||
|
{{ define "__prom_query_drilldown_noop" }}{{ . }}{{ end }} |
||||||
|
{{ define "humanize" }}{{ humanize . }}{{ end }} |
||||||
|
{{ define "humanizeNoSmallPrefix" }}{{ if and (lt . 1.0) (gt . -1.0) }}{{ printf "%.3g" . }}{{ else }}{{ humanize . }}{{ end }}{{ end }} |
||||||
|
{{ define "humanize1024" }}{{ humanize1024 . }}{{ end }} |
||||||
|
{{ define "humanizeDuration" }}{{ humanizeDuration . }}{{ end }} |
||||||
|
{{ define "printf.3g" }}{{ printf "%.3g" . }}{{ end }} |
||||||
|
|
||||||
|
{{/* prom_query_drilldown (args expr suffix? renderTemplate?) |
||||||
|
Displays the result of the expression, with a link to /graph for it. |
||||||
|
|
||||||
|
renderTemplate is the name of the template to use to render the value. |
||||||
|
*/}} |
||||||
|
{{ define "prom_query_drilldown" }} |
||||||
|
{{ $expr := .arg0}}{{ $suffix := (or .arg1 "")}}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop")}} |
||||||
|
<a class="prom_query_drilldown" href="{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{else}}-{{ end }}</a> |
||||||
|
{{ end }} |
||||||
|
|
||||||
|
{{ define "prom_path" }}/consoles/{{.Path}}?{{range $param, $value := .Params}}{{$param}}={{$value}}&{{end}}{{ end }}" |
||||||
|
|
||||||
|
{{/* Top and bottom of table on RHS */}} |
||||||
|
{{define "prom_right_table_head"}} |
||||||
|
<div class="prom_console_rhs"> |
||||||
|
<table class="table table-bordered table-hover table-condensed"> |
||||||
|
{{end}} |
||||||
|
{{define "prom_right_table_tail"}} |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
|
||||||
|
{{end}} |
||||||
|
|
||||||
|
{{/* Top and bottom of main content */}} |
||||||
|
{{define "prom_content_head"}} |
||||||
|
<div class="prom_console_content"> |
||||||
|
{{template "prom_graph_timecontrol" .}} |
||||||
|
{{end}} |
||||||
|
{{define "prom_content_tail"}} |
||||||
|
</div> |
||||||
|
{{end}} |
||||||
|
|
||||||
|
{{define "prom_graph_timecontrol"}} |
||||||
|
<div class="prom_graph_timecontrol"> |
||||||
|
<div class="prom_graph_timecontrol_inner"> |
||||||
|
<label for="prom_graph_duration">Range:</label> |
||||||
|
<div class="input-prepend input-append"> |
||||||
|
<button class="btn btn-mini" type="button" id="prom_graph_duration_shrink" title="Shrink the time range."> |
||||||
|
<i class="icon-minus"></i> |
||||||
|
</button> |
||||||
|
<input class="input-mini" title="Time range of graph" type="text" id="prom_graph_duration"> |
||||||
|
<button class="btn btn-mini" type="button" id="prom_graph_duration_grow" title="Grow the time range."> |
||||||
|
<i class="icon-plus"></i> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<label for="prom_graph_duration">End:</label> |
||||||
|
<div class="input-prepend input-append"> |
||||||
|
<button class="btn btn-mini" type="button" id="prom_graph_time_back" title="Rewind the end time."> |
||||||
|
<i class="icon-backward"></i> |
||||||
|
</button> |
||||||
|
<input class="input-medium" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value=""> |
||||||
|
<button class="btn btn-mini" type="button" id="prom_graph_time_forward" title="Advance the end time."> |
||||||
|
<i class="icon-forward"></i> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="input-prepend input-append"> |
||||||
|
<div class="btn-group dropup prom_graph_timecontrol_refresh"> |
||||||
|
<button type="button" class="btn btn-mini" id="prom_graph_refresh_button"> |
||||||
|
<span class="icon-repeat"></span> |
||||||
|
(<span id="prom_graph_refresh_button_value">Off</span>) |
||||||
|
</button> |
||||||
|
<button type="button" class="btn btn-mini dropdown-toggle" data-toggle="dropdown"> |
||||||
|
<span class="caret"></span> |
||||||
|
</button> |
||||||
|
<ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu"> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
new PromConsole.TimeControl(); |
||||||
|
</script> |
||||||
|
</div> |
||||||
|
{{end}} |
||||||
|
|
||||||
|
{{/* Bottom of all pages. */}} |
||||||
|
{{define "tail"}} |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
{{end}} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
{{ template "head" . }} |
||||||
|
|
||||||
|
{{template "prom_right_table_head"}} |
||||||
|
{{template "prom_right_table_tail"}} |
||||||
|
|
||||||
|
{{template "prom_content_head" .}} |
||||||
|
<h1>Overview</h1> |
||||||
|
<p>These are example consoles for Prometheus, they are still under development.</p> |
||||||
|
{{template "prom_content_tail" .}} |
||||||
|
|
||||||
|
{{template "tail"}} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
{{template "head" .}} |
||||||
|
|
||||||
|
{{template "prom_right_table_head"}} |
||||||
|
<tr><th colspan="2">CPU</th></tr> |
||||||
|
{{ range printf "sum by (mode)(rate(node_cpu{job='node',instance='%s'}[5m])) * 100 / scalar(count(count by (cpu)(node_cpu{job='node',instance='%s'})))" .Params.instance .Params.instance | query | sortByLabel "mode"}} |
||||||
|
<tr> |
||||||
|
<td>{{ .Labels.mode | title }} CPU</td> |
||||||
|
<td>{{ .Value | printf "%.3g" }}%</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
<tr><th colspan="2">Misc</th></tr> |
||||||
|
<tr> |
||||||
|
<td>Processes Running</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "node_procs_running{job='node',instance='%s'}" .Params.instance) "" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Processes Blocked</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "node_procs_blocked{job='node',instance='%s'}" .Params.instance) "" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Forks</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_forks{job='node',instance='%s'}[5m])" .Params.instance) "/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Context Switches</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_context_switches{job='node',instance='%s'}[5m])" .Params.instance) "/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Interrupts</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_intr{job='node',instance='%s'}[5m])" .Params.instance) "/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>1m Loadavg</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "node_load1{job='node',instance='%s'}" .Params.instance)) }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
</tr> |
||||||
|
{{template "prom_right_table_tail"}} |
||||||
|
|
||||||
|
{{template "prom_content_head" .}} |
||||||
|
<h1>Node CPU - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1> |
||||||
|
|
||||||
|
<h3>CPU Usage</h3> |
||||||
|
<div id="cpuGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#cpuGraph"), |
||||||
|
expr: "sum by (mode)(rate(node_cpu{job='node',instance='{{.Params.instance}}',mode!='idle'}[5m]))", |
||||||
|
renderer: 'area', |
||||||
|
max: {{ with printf "count(count by (cpu)(node_cpu{job='node',instance='%s'}))" .Params.instance | query }}{{ . | first | value}}{{else}}undefined{{end}}, |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yTitle: 'Cores' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
{{template "prom_content_tail" .}} |
||||||
|
|
||||||
|
{{template "tail"}} |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
{{template "head" .}} |
||||||
|
|
||||||
|
{{template "prom_right_table_head"}} |
||||||
|
<th colspan="2">Disks</th> |
||||||
|
</tr> |
||||||
|
{{ range printf "node_disk_io_time_ms{job='node',instance='%s'}" .Params.instance | query | sortByLabel "device"}} |
||||||
|
<th colspan="2">{{ .Labels.device }}</th> |
||||||
|
<tr> |
||||||
|
<td>Utilization</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_io_time_ms{job='node',instance='%s',device='%s'}[5m]) / 1000 * 100" .Labels.instance .Labels.device) "%" "printf.3g") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Throughput</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_sectors_read{job='node',instance='%s',device='%s'}[5m]) * 512 + rate(node_disk_sectors_written{job='node',instance='%s',device='%s'}[5m]) * 512" .Labels.instance .Labels.device .Labels.instance .Labels.device) "B/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Avg Read Time</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_read_time_ms{job='node',instance='%s',device='%s'}[5m]) / 1000 / rate(node_disk_reads_completed{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device .Labels.instance .Labels.device) "s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Avg Write Time</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_write_time_ms{job='node',instance='%s',device='%s'}[5m]) / 1000 / rate(node_disk_writes_completed{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device .Labels.instance .Labels.device) "s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
<th colspan="2">Filesystem Fullness</th> |
||||||
|
</tr> |
||||||
|
{{ define "roughlyNearZero"}} |
||||||
|
{{ if gt .1 . }}~0{{ else }}{{ printf "%.3g" . }}{{ end }} |
||||||
|
{{ end }} |
||||||
|
{{ range printf "node_filesystem_size{job='node',instance='%s'}" .Params.instance | query | sortByLabel "filesystem"}} |
||||||
|
<tr> |
||||||
|
<td>{{.Labels.filesystem}}</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "100 - node_filesystem_free{job='node',instance='%s',filesystem='%s'} / node_filesystem_size{job='node'} * 100" .Labels.instance .Labels.filesystem) "%" "roughlyNearZero") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
<tr> |
||||||
|
</tr> |
||||||
|
{{template "prom_right_table_tail"}} |
||||||
|
|
||||||
|
{{template "prom_content_head" .}} |
||||||
|
<h1>Node Disk - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1> |
||||||
|
|
||||||
|
<h3>Disk I/O Utilization</h3> |
||||||
|
<div id="diskioGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#diskioGraph"), |
||||||
|
expr: [ |
||||||
|
"rate(node_disk_io_time_ms{job='node',instance='{{.Params.instance}}',device!~'^(md\\d+$|dm-)'}[5m]) / 1000 * 100", |
||||||
|
], |
||||||
|
min: 0, |
||||||
|
name: '[[ device ]]', |
||||||
|
yUnits: "%", |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yTitle: 'Disk I/O Utilization' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<h3>Filesystem Usage</h3> |
||||||
|
<div id="fsGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#fsGraph"), |
||||||
|
expr: "100 - node_filesystem_free{job='node',instance='{{ .Params.instance }}'} / node_filesystem_size{job='node'} * 100", |
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
name: '[[ filesystem ]]', |
||||||
|
yUnits: "%", |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yTitle: 'Filesystem Fullness' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
{{template "prom_content_tail" .}} |
||||||
|
|
||||||
|
{{template "tail"}} |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
{{template "head" .}} |
||||||
|
|
||||||
|
{{template "prom_right_table_head"}} |
||||||
|
<tr><th colspan="2">Overview</th></tr> |
||||||
|
<tr> |
||||||
|
<td>User CPU</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "sum(rate(node_cpu{job='node',instance='%s',mode='user'}[5m])) * 100 / count(count by (cpu)(node_cpu{job='node',instance='%s'}))" .Params.instance .Params.instance) "%" "printf.3g") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>System CPU</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "sum(rate(node_cpu{job='node',instance='%s',mode='system'}[5m])) * 100 / count(count by (cpu)(node_cpu{job='node',instance='%s'}))" .Params.instance .Params.instance) "%" "printf.3g") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Memory Total</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "node_memory_MemTotal{job='node',instance='%s'}" .Params.instance) "B" "humanize1024") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Memory Free</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "node_memory_MemFree{job='node',instance='%s'}" .Params.instance) "B" "humanize1024") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th colspan="2">Network</th> |
||||||
|
</tr> |
||||||
|
{{ range printf "node_network_receive_bytes{job='node',instance='%s',device!='lo'}" .Params.instance | query | sortByLabel "device"}} |
||||||
|
<tr> |
||||||
|
<td>{{ .Labels.device }} Received</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_network_receive_bytes{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device) "B/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>{{ .Labels.device }} Transmitted</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_network_transmit_bytes{job='node',instance='%s',device='%s'}[5m])" .Labels.instance .Labels.device) "B/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th colspan="2">Disks</th> |
||||||
|
</tr> |
||||||
|
{{ range printf "node_disk_io_time_ms{job='node',instance='%s',device!~'^(md\\d+$|dm-)'}" .Params.instance | query | sortByLabel "device"}} |
||||||
|
<tr> |
||||||
|
<td>{{ .Labels.device }} Utilization</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_io_time_ms{job='node',instance='%s',device='%s'}[5m]) / 1000 * 100" .Labels.instance .Labels.device) "%" "printf.3g") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
{{ range printf "node_disk_io_time_ms{job='node',instance='%s'}" .Params.instance | query | sortByLabel "device"}} |
||||||
|
<tr> |
||||||
|
<td>{{ .Labels.device }} Throughput</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "rate(node_disk_sectors_read{job='node',instance='%s',device='%s'}[5m]) * 512 + rate(node_disk_sectors_written{job='node',instance='%s',device='%s'}[5m]) * 512" .Labels.instance .Labels.device .Labels.instance .Labels.device) "B/s" "humanize") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
<tr> |
||||||
|
<th colspan="2">Filesystem Fullness</th> |
||||||
|
</tr> |
||||||
|
{{ define "roughlyNearZero"}} |
||||||
|
{{ if gt .1 . }}~0{{ else }}{{ printf "%.3g" . }}{{ end }} |
||||||
|
{{ end }} |
||||||
|
{{ range printf "node_filesystem_size{job='node',instance='%s'}" .Params.instance | query | sortByLabel "filesystem"}} |
||||||
|
<tr> |
||||||
|
<td>{{.Labels.filesystem}}</td> |
||||||
|
<td>{{ template "prom_query_drilldown" (args (printf "100 - node_filesystem_free{job='node',instance='%s',filesystem='%s'} / node_filesystem_size{job='node'} * 100" .Labels.instance .Labels.filesystem) "%" "roughlyNearZero") }}</td> |
||||||
|
</tr> |
||||||
|
{{ end }} |
||||||
|
</tr> |
||||||
|
{{template "prom_right_table_tail"}} |
||||||
|
|
||||||
|
{{template "prom_content_head" .}} |
||||||
|
<h1>Node Overview - {{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</h1> |
||||||
|
|
||||||
|
<h3>CPU Usage</h3> |
||||||
|
<div id="cpuGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#cpuGraph"), |
||||||
|
expr: "sum by (mode)(rate(node_cpu{job='node',instance='{{.Params.instance}}',mode!='idle'}[5m]))", |
||||||
|
renderer: 'area', |
||||||
|
max: {{ with printf "count(count by (cpu)(node_cpu{job='node',instance='%s'}))" .Params.instance | query }}{{ . | first | value}}{{else}}undefined{{end}}, |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yTitle: 'Cores' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<h3>Disk I/O Utilization</h3> |
||||||
|
<div id="diskioGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#diskioGraph"), |
||||||
|
expr: [ |
||||||
|
"rate(node_disk_io_time_ms{job='node',instance='{{.Params.instance}}',device!~'^(md\\d+$|dm-)'}[5m]) / 1000 * 100", |
||||||
|
], |
||||||
|
min: 0, |
||||||
|
name: '[[ device ]]', |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix, |
||||||
|
yUnits: "%", |
||||||
|
yTitle: 'Disk I/O Utilization' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<h3>Memory</h3> |
||||||
|
<div id="memoryGraph"></div> |
||||||
|
<script> |
||||||
|
new PromConsole.Graph({ |
||||||
|
node: document.querySelector("#memoryGraph"), |
||||||
|
renderer: 'area', |
||||||
|
expr: [ |
||||||
|
"node_memory_Cached{job='node',instance='{{.Params.instance}}'}", |
||||||
|
"node_memory_Buffers{job='node',instance='{{.Params.instance}}'}", |
||||||
|
"node_memory_MemTotal{job='node',instance='{{.Params.instance}}'} - node_memory_MemFree{job='node',instance='{{.Params.instance}}'} - node_memory_Buffers{job='node',instance='{{.Params.instance}}'} - node_memory_Cached{job='node',instance='{{.Params.instance}}'}", |
||||||
|
"node_memory_MemFree{job='node',instance='{{.Params.instance}}'}", |
||||||
|
], |
||||||
|
name: function(metric) { |
||||||
|
return !metric.__name__ ? 'Used' : metric.__name__.split('_', 3)[2] }, |
||||||
|
min: 0, |
||||||
|
yUnits: "B", |
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanize1024, |
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanize1024, |
||||||
|
yTitle: 'Memory' |
||||||
|
}) |
||||||
|
</script> |
||||||
|
{{template "prom_content_tail" .}} |
||||||
|
|
||||||
|
{{template "tail"}} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
{{template "head" .}} |
||||||
|
|
||||||
|
{{template "prom_right_table_head"}} |
||||||
|
<tr> |
||||||
|
<th>Node</th> |
||||||
|
<th>{{ template "prom_query_drilldown" (args "sum(up{job='node'})") }} / {{ template "prom_query_drilldown" (args "count(up{job='node'})") }}</th> |
||||||
|
</tr> |
||||||
|
{{template "prom_right_table_tail"}} |
||||||
|
|
||||||
|
{{template "prom_content_head" .}} |
||||||
|
<h1>Node</h1> |
||||||
|
|
||||||
|
Choose an instance on the left. |
||||||
|
{{template "prom_content_tail" .}} |
||||||
|
|
||||||
|
{{template "tail"}} |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
.prom_lhs_menu { |
||||||
|
float: left; |
||||||
|
margin-right: 2ex; |
||||||
|
background: #000000; |
||||||
|
min-height: 100%; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
.prom_lhs_menu ul { |
||||||
|
list-style: none; |
||||||
|
padding-left: .5ex; |
||||||
|
margin-left: .5ex; |
||||||
|
} |
||||||
|
.prom_lhs_menu li { |
||||||
|
padding-right: 1ex; |
||||||
|
padding-left: 1ex; |
||||||
|
} |
||||||
|
.prom_lhs_menu a, |
||||||
|
.prom_lhs_menu li { |
||||||
|
color: #999999; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.prom_lhs_menu a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.prom_lhs_menu_selected a { |
||||||
|
pointer-events: none; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
.prom_lhs_menu_selected { |
||||||
|
background: #555555; |
||||||
|
background-clip: padding-box; |
||||||
|
} |
||||||
|
.prom_lhs_menu span:hover, |
||||||
|
.prom_lhs_menu a:hover { |
||||||
|
background: #666666; |
||||||
|
} |
||||||
|
|
||||||
|
.prom_console_rhs { |
||||||
|
float: right; |
||||||
|
margin-left: 1ex; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.prom_console_rhs table { |
||||||
|
margin-top: 1ex; |
||||||
|
margin-bottom: 32px; /* Space for time control. */ |
||||||
|
} |
||||||
|
.prom_console_rhs th { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.prom_console_rhs td:nth-child(2) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.prom_console_content { |
||||||
|
overflow: visible; |
||||||
|
margin-bottom: 32px; /* Space for time control. */ |
||||||
|
} |
||||||
|
|
||||||
|
.prom_query_drilldown { |
||||||
|
text-decoration: none; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
.prom_query_drilldown:hover, a.prom_query_drilldown:active { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.rickshaw_legend { |
||||||
|
padding: 2px; |
||||||
|
margin-top: 1px; |
||||||
|
} |
||||||
|
.rickshaw_legend li { |
||||||
|
min-width: 0; |
||||||
|
} |
||||||
|
.rickshaw_legend ul li { |
||||||
|
list-style-type: none; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.rickshaw_graph { |
||||||
|
width: 100%; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.prom_graph_hover_flipped.x_label { |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
.prom_graph_hover_flipped.item { |
||||||
|
right: 10px; |
||||||
|
} |
||||||
|
.rickshaw_graph .detail .prom_graph_hover_flipped.item:before { |
||||||
|
content: "\25b8"; |
||||||
|
left: auto; |
||||||
|
right: 1px; |
||||||
|
font-size: 0.8em; |
||||||
|
} |
||||||
|
.prom_graph_ytitle { |
||||||
|
-webkit-transform: rotate(-90deg); |
||||||
|
-moz-transform: rotate(-90deg); |
||||||
|
font-size: 11px; |
||||||
|
font-family: Arial; |
||||||
|
max-width: 13px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.prom_graph_xtitle { |
||||||
|
text-align: center; |
||||||
|
font-size: 11px; |
||||||
|
font-family: Arial; |
||||||
|
} |
||||||
|
.prom_graph_loading { |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: 0px; |
||||||
|
} |
||||||
|
.prom_graph_error { |
||||||
|
font-family: Arial; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
a.prom_graph_link { |
||||||
|
text-decoration: none; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.prom_graph_timecontrol { |
||||||
|
background: #000000; |
||||||
|
position: fixed; |
||||||
|
padding: 2px; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol_inner { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol button { |
||||||
|
font-size: 10pt; |
||||||
|
margin-right: .3em; |
||||||
|
padding-top: 2px; |
||||||
|
padding-bottom: 2px; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol_refresh button { |
||||||
|
padding-top: 0; |
||||||
|
padding-bottom: 0; |
||||||
|
border-bottom: 0; |
||||||
|
border-top: 0; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol_refresh .dropdown-menu { |
||||||
|
min-width: 70px; |
||||||
|
padding-top: 0; |
||||||
|
padding-bottom: 0; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol input { |
||||||
|
font-size: 10pt; |
||||||
|
margin-left: -4px; |
||||||
|
margin-right: -4px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol label { |
||||||
|
display: inline; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol .input-append { |
||||||
|
margin: 2px; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol .input-append .btn:first-child i { |
||||||
|
margin-right: 4px; |
||||||
|
margin-left: 2px; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol .input-append .btn:last-child i { |
||||||
|
margin-left: 6px; |
||||||
|
} |
||||||
|
.prom_graph_timecontrol .input-append i { |
||||||
|
padding-top: -4px; |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
@ -0,0 +1,584 @@ |
|||||||
|
/* |
||||||
|
* Functions to make it easier to write prometheus consoles, such |
||||||
|
* as graphs. |
||||||
|
* |
||||||
|
*/ |
||||||
|
|
||||||
|
PromConsole = {}; |
||||||
|
|
||||||
|
PromConsole.NumberFormatter = {}; |
||||||
|
PromConsole.NumberFormatter.prefixesBig = ["k", "M", "G", "T", "P", "E", "Z", "Y"]; |
||||||
|
PromConsole.NumberFormatter.prefixesBig1024 = ["ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi"]; |
||||||
|
PromConsole.NumberFormatter.prefixesSmall = ["m", "u", "n", "p", "f", "a", "z", "y"]; |
||||||
|
|
||||||
|
PromConsole._stripTrailingZero = function(x) { |
||||||
|
if (x.indexOf("e") == -1) { |
||||||
|
// It's not safe to strip if it's scientific notation.
|
||||||
|
return x.replace(/\.?0*$/, ''); |
||||||
|
} |
||||||
|
return x; |
||||||
|
} |
||||||
|
|
||||||
|
// Humanize a number.
|
||||||
|
PromConsole.NumberFormatter.humanize = function(x) { |
||||||
|
var ret = PromConsole.NumberFormatter._humanize( |
||||||
|
x, PromConsole.NumberFormatter.prefixesBig, |
||||||
|
PromConsole.NumberFormatter.prefixesSmall, 1000); |
||||||
|
x = ret[0]; |
||||||
|
var prefix = ret[1]; |
||||||
|
if (Math.abs(x) < 1) { |
||||||
|
return x.toExponential(3) + prefix; |
||||||
|
} |
||||||
|
return PromConsole._stripTrailingZero(x.toFixed(3)) + prefix; |
||||||
|
} |
||||||
|
|
||||||
|
// Humanize a number, don't use milli/micro/etc. prefixes.
|
||||||
|
PromConsole.NumberFormatter.humanizeNoSmallPrefix = function(x) { |
||||||
|
if (Math.abs(x) < 1) { |
||||||
|
return PromConsole._stripTrailingZero(x.toPrecision(3)); |
||||||
|
} |
||||||
|
var ret = PromConsole.NumberFormatter._humanize( |
||||||
|
x, PromConsole.NumberFormatter.prefixesBig, |
||||||
|
[], 1000); |
||||||
|
x = ret[0]; |
||||||
|
var prefix = ret[1]; |
||||||
|
return PromConsole._stripTrailingZero(x.toFixed(3)) + prefix; |
||||||
|
} |
||||||
|
|
||||||
|
// Humanize a number with 1024 as the base, rather than 1000.
|
||||||
|
PromConsole.NumberFormatter.humanize1024 = function(x) { |
||||||
|
var ret = PromConsole.NumberFormatter._humanize( |
||||||
|
x, PromConsole.NumberFormatter.prefixesBig1024, |
||||||
|
[], 1024); |
||||||
|
x = ret[0]; |
||||||
|
var prefix = ret[1]; |
||||||
|
if (Math.abs(x) < 1) { |
||||||
|
return x.toExponential(3) + prefix; |
||||||
|
} |
||||||
|
return PromConsole._stripTrailingZero(x.toFixed(3)) + prefix; |
||||||
|
} |
||||||
|
|
||||||
|
// Humanize a number, returning an exact representation.
|
||||||
|
PromConsole.NumberFormatter.humanizeExact = function(x) { |
||||||
|
var ret = PromConsole.NumberFormatter._humanize( |
||||||
|
x, PromConsole.NumberFormatter.prefixesBig, |
||||||
|
PromConsole.NumberFormatter.prefixesSmall, 1000); |
||||||
|
return ret[0] + ret[1]; |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.NumberFormatter._humanize = function(x, prefixesBig, prefixesSmall, factor) { |
||||||
|
var prefix = "" |
||||||
|
if (x == 0) { |
||||||
|
/* Do nothing. */ |
||||||
|
} else if (Math.abs(x) >= 1) { |
||||||
|
for (var i=0; i < prefixesBig.length && Math.abs(x) >= factor; ++i) { |
||||||
|
x /= factor; |
||||||
|
prefix = prefixesBig[i]; |
||||||
|
} |
||||||
|
} else { |
||||||
|
for (var i=0; i < prefixesSmall.length && Math.abs(x) < 1; ++i) { |
||||||
|
x *= factor; |
||||||
|
prefix = prefixesSmall[i]; |
||||||
|
} |
||||||
|
} |
||||||
|
return [x, prefix]; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
PromConsole.TimeControl = function() { |
||||||
|
document.getElementById("prom_graph_duration_shrink").onclick = this.decreaseDuration.bind(this); |
||||||
|
document.getElementById("prom_graph_duration_grow").onclick = this.increaseDuration.bind(this); |
||||||
|
document.getElementById("prom_graph_time_back").onclick = this.decreaseEnd.bind(this); |
||||||
|
document.getElementById("prom_graph_time_forward").onclick = this.increaseEnd.bind(this); |
||||||
|
document.getElementById("prom_graph_refresh_button").onclick = this.refresh.bind(this); |
||||||
|
this.durationElement = document.getElementById("prom_graph_duration"); |
||||||
|
this.endElement = document.getElementById("prom_graph_time_end"); |
||||||
|
this.durationElement.oninput = this.dispatch.bind(this); |
||||||
|
this.endElement.oninput = this.dispatch.bind(this); |
||||||
|
this.endElement.oninput = this.dispatch.bind(this); |
||||||
|
this.refreshValueElement = document.getElementById("prom_graph_refresh_button_value"); |
||||||
|
|
||||||
|
var refreshList = document.getElementById("prom_graph_refresh_intervals"); |
||||||
|
var refreshIntervals = ["Off", "1m", "5m", "15m", "1h"]; |
||||||
|
for (var i=0; i < refreshIntervals.length; ++i) { |
||||||
|
var li = document.createElement("li"); |
||||||
|
li.onclick = this.setRefresh.bind(this, refreshIntervals[i]); |
||||||
|
li.textContent = refreshIntervals[i]; |
||||||
|
refreshList.appendChild(li); |
||||||
|
} |
||||||
|
|
||||||
|
this.durationElement.value = PromConsole.TimeControl.prototype.getHumanDuration( |
||||||
|
PromConsole.TimeControl._initialValues.duration); |
||||||
|
if (PromConsole.TimeControl._initialValues.endTimeNow === undefined) { |
||||||
|
this.endElement.value = PromConsole.TimeControl.prototype.getHumanDate( |
||||||
|
new Date(PromConsole.TimeControl._initialValues.endTime * 1000)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.TimeControl.timeFactors = { |
||||||
|
"y": 60 * 60 * 24 * 365, |
||||||
|
"w": 60 * 60 * 24 * 7, |
||||||
|
"d": 60 * 60 * 24, |
||||||
|
"h": 60 * 60, |
||||||
|
"m": 60, |
||||||
|
"s": 1 |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.stepValues = [ |
||||||
|
"10s", "1m", "5m", "15m", "30m", "1h", "2h", "6h", "12h", "1d", "2d", |
||||||
|
"1w", "2w", "4w", "8w", "1y", "2y" |
||||||
|
]; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype._setHash = function() { |
||||||
|
var duration = this.parseDuration(this.durationElement.value); |
||||||
|
var endTime = this.getEndDate() / 1000; |
||||||
|
window.location.hash = "#pctc" + encodeURIComponent(JSON.stringify( |
||||||
|
{duration: duration, endTime: endTime})); |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.TimeControl._initialValues = function() { |
||||||
|
var hash = window.location.hash; |
||||||
|
if (hash.indexOf('#pctc') == 0) { |
||||||
|
return JSON.parse(decodeURIComponent(hash.substring(5))); |
||||||
|
} |
||||||
|
return {duration: 3600, endTime: new Date().getTime() / 1000, endTimeNow: true}; |
||||||
|
}(); |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.parseDuration = function(durationText) { |
||||||
|
var durationRE = new RegExp("^([0-9]+)([ywdhms]?)$"); |
||||||
|
var matches = durationText.match(durationRE); |
||||||
|
if (!matches) { return 3600; } |
||||||
|
var value = parseInt(matches[1]); |
||||||
|
var unit = matches[2] || 's'; |
||||||
|
return value * PromConsole.TimeControl.timeFactors[unit]; |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.getHumanDuration = function(duration) { |
||||||
|
var units = []; |
||||||
|
for (var key in PromConsole.TimeControl.timeFactors) { |
||||||
|
units.push([PromConsole.TimeControl.timeFactors[key], key]); |
||||||
|
} |
||||||
|
units.sort(function(a, b) { return b[0] - a[0] }); |
||||||
|
for (var i = 0; i < units.length; ++i) { |
||||||
|
if (duration % units[i][0] == 0) { |
||||||
|
return (duration / units[i][0]) + units[i][1]; |
||||||
|
} |
||||||
|
} |
||||||
|
return duration; |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.increaseDuration = function() { |
||||||
|
var durationSeconds = this.parseDuration(this.durationElement.value); |
||||||
|
for (var i = 0; i < PromConsole.TimeControl.stepValues.length; i++) { |
||||||
|
if (durationSeconds < this.parseDuration(PromConsole.TimeControl.stepValues[i])) { |
||||||
|
this.setDuration(PromConsole.TimeControl.stepValues[i]); |
||||||
|
this.dispatch(); |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.decreaseDuration = function() { |
||||||
|
var durationSeconds = this.parseDuration(this.durationElement.value); |
||||||
|
for (var i = PromConsole.TimeControl.stepValues.length - 1; i >= 0; i--) { |
||||||
|
if (durationSeconds > this.parseDuration(PromConsole.TimeControl.stepValues[i])) { |
||||||
|
this.setDuration(PromConsole.TimeControl.stepValues[i]); |
||||||
|
this.dispatch(); |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.setDuration = function(duration) { |
||||||
|
this.durationElement.value = duration; |
||||||
|
this._setHash(); |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.getEndDate = function() { |
||||||
|
if (this.endElement.value == '') { |
||||||
|
return null; |
||||||
|
} |
||||||
|
return new Date(this.endElement.value).getTime(); |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.getOrSetEndDate = function() { |
||||||
|
var date = this.getEndDate(); |
||||||
|
if (date) { |
||||||
|
return date; |
||||||
|
} |
||||||
|
date = new Date(); |
||||||
|
this.setEndDate(date); |
||||||
|
return date; |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.getHumanDate = function(date) { |
||||||
|
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); |
||||||
|
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); |
||||||
|
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + |
||||||
|
hours + ":" + minutes; |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.setEndDate = function(date) { |
||||||
|
this.setRefresh("Off"); |
||||||
|
this.endElement.value = this.getHumanDate(date); |
||||||
|
this._setHash(); |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.increaseEnd = function() { |
||||||
|
// Increase duration 25% range & convert ms to s.
|
||||||
|
this.setEndDate(new Date(this.getOrSetEndDate() + this.parseDuration(this.durationElement.value) * 1000/4 )); |
||||||
|
this.dispatch(); |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.decreaseEnd = function() { |
||||||
|
this.setEndDate(new Date(this.getOrSetEndDate() - this.parseDuration(this.durationElement.value) * 1000/4 )); |
||||||
|
this.dispatch(); |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.refresh = function() { |
||||||
|
this.endElement.value = ''; |
||||||
|
this._setHash(); |
||||||
|
this.dispatch(); |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.dispatch = function() { |
||||||
|
var durationSeconds = this.parseDuration(this.durationElement.value); |
||||||
|
var end = this.getEndDate(); |
||||||
|
if (end === null) { |
||||||
|
end = new Date().getTime(); |
||||||
|
} |
||||||
|
for (var i = 0; i< PromConsole._graph_registry.length; i++) { |
||||||
|
var graph = PromConsole._graph_registry[i]; |
||||||
|
graph.params.duration = durationSeconds; |
||||||
|
graph.params.endTime = end / 1000; |
||||||
|
graph.dispatch(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype._refreshInterval = null; |
||||||
|
|
||||||
|
PromConsole.TimeControl.prototype.setRefresh = function(duration) { |
||||||
|
if (this._refreshInterval !== null) { |
||||||
|
window.clearInterval(this._refreshInterval); |
||||||
|
this._refreshInterval = null; |
||||||
|
} |
||||||
|
if (duration != "Off") { |
||||||
|
if (this.endElement.value != '') { |
||||||
|
this.refresh(); |
||||||
|
} |
||||||
|
var durationSeconds = this.parseDuration(duration); |
||||||
|
this._refreshInterval = window.setInterval(this.dispatch.bind(this), durationSeconds * 1000); |
||||||
|
} |
||||||
|
this.refreshValueElement.textContent = duration; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// List of all graphs, used by time controls.
|
||||||
|
PromConsole._graph_registry = []; |
||||||
|
|
||||||
|
PromConsole.graphDefaults = { |
||||||
|
expr: null, // Expression to graph. Can be a list of strings.
|
||||||
|
node: null, // DOM node to place graph under.
|
||||||
|
// How long the graph is over, in seconds.
|
||||||
|
duration: PromConsole.TimeControl._initialValues.duration, |
||||||
|
// The unixtime the graph ends at.
|
||||||
|
endTime: PromConsole.TimeControl._initialValues.endTime, |
||||||
|
width: null, // Height of the graph div, excluding titles and legends.
|
||||||
|
// Defaults to auto-detection.
|
||||||
|
height: 200, // Height of the graph div, excluding titles and legends.
|
||||||
|
min: "auto", // Minimum Y-axis value, defaults to lowest data value.
|
||||||
|
max: undefined, // Maximum Y-axis value, defaults to highest data value.
|
||||||
|
renderer: 'line', // Type of graphs, options are 'line' and 'area'.
|
||||||
|
name: null, // What to call plots, defaults to trying to do
|
||||||
|
// something reasonable.
|
||||||
|
// If a string, it'll use that. [[ label ]] will be substituted.
|
||||||
|
// If a function it'll be called with a map of keys to values,
|
||||||
|
// and should return the name to use.
|
||||||
|
xTitle: "Time", // The title of the x axis.
|
||||||
|
yUnits: "", // The units of the y axis.
|
||||||
|
yTitle: "", // The title of the y axis.
|
||||||
|
// Number formatter for y axis.
|
||||||
|
yAxisFormatter: PromConsole.NumberFormatter.humanize, |
||||||
|
// Number formatter for y values hover detail.
|
||||||
|
yHoverFormatter: PromConsole.NumberFormatter.humanizeExact, |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.Graph = function(params) { |
||||||
|
for (var k in PromConsole.graphDefaults) { |
||||||
|
if (!(k in params)) { |
||||||
|
params[k] = PromConsole.graphDefaults[k]; |
||||||
|
} |
||||||
|
} |
||||||
|
if (typeof params.expr == "string") { |
||||||
|
params.expr = [params.expr] |
||||||
|
} |
||||||
|
|
||||||
|
this.params = params; |
||||||
|
this.rendered_data = null; |
||||||
|
PromConsole._graph_registry.push(this); |
||||||
|
|
||||||
|
/* |
||||||
|
* Table layout: |
||||||
|
* | yTitle | Graph | |
||||||
|
* | | xTitle | |
||||||
|
* | /graph | Legend | |
||||||
|
*/ |
||||||
|
var table = document.createElement("table"); |
||||||
|
table.className = "prom_graph_table"; |
||||||
|
params.node.appendChild(table); |
||||||
|
var tr = document.createElement("tr"); |
||||||
|
table.appendChild(tr); |
||||||
|
var yTitleTd = document.createElement("td"); |
||||||
|
tr.appendChild(yTitleTd); |
||||||
|
var yTitleDiv = document.createElement("td"); |
||||||
|
yTitleTd.appendChild(yTitleDiv); |
||||||
|
yTitleDiv.className = "prom_graph_ytitle"; |
||||||
|
yTitleDiv.textContent = params.yTitle + (params.yUnits ? " (" + params.yUnits.trim() + ")" : ""); |
||||||
|
|
||||||
|
this.graphTd = document.createElement("td"); |
||||||
|
tr.appendChild(this.graphTd); |
||||||
|
this.graphTd.className = "rickshaw_graph"; |
||||||
|
this.graphTd.width = params.width; |
||||||
|
this.graphTd.height = params.height; |
||||||
|
|
||||||
|
tr = document.createElement("tr"); |
||||||
|
table.appendChild(tr); |
||||||
|
tr.appendChild(document.createElement("td")); |
||||||
|
var xTitleTd = document.createElement("td"); |
||||||
|
tr.appendChild(xTitleTd); |
||||||
|
xTitleTd.className = "prom_graph_xtitle"; |
||||||
|
xTitleTd.textContent = params.xTitle; |
||||||
|
|
||||||
|
tr = document.createElement("tr"); |
||||||
|
table.appendChild(tr); |
||||||
|
var graphLinkTd = document.createElement("td"); |
||||||
|
tr.appendChild(graphLinkTd); |
||||||
|
var graphLinkA = document.createElement("a"); |
||||||
|
graphLinkTd.appendChild(graphLinkA); |
||||||
|
graphLinkA.className = "prom_graph_link"; |
||||||
|
graphLinkA.textContent = "+"; |
||||||
|
graphLinkA.href = PromConsole._graphsToSlashGraphURL(params.expr); |
||||||
|
var legendTd = document.createElement("td"); |
||||||
|
tr.appendChild(legendTd); |
||||||
|
this.legendDiv = document.createElement("div"); |
||||||
|
legendTd.width = params.width; |
||||||
|
legendTd.appendChild(this.legendDiv); |
||||||
|
|
||||||
|
window.addEventListener('resize', function() { |
||||||
|
if(this.rendered_data !== null) { |
||||||
|
this._render(this.rendered_data); |
||||||
|
} |
||||||
|
}.bind(this)) |
||||||
|
|
||||||
|
this.dispatch(); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.Graph.prototype._render = function(data) { |
||||||
|
var palette = new Rickshaw.Color.Palette(); |
||||||
|
var series = []; |
||||||
|
|
||||||
|
// This will be used on resize.
|
||||||
|
this.rendered_data = data; |
||||||
|
|
||||||
|
var nameFunc; |
||||||
|
if (this.params.name === null) { |
||||||
|
nameFunc = PromConsole._chooseNameFunction(data); |
||||||
|
} else if (typeof this.params.name == "string") { |
||||||
|
nameFunc = function(metric) { |
||||||
|
return PromConsole._interpolateName(this.params.name, metric); |
||||||
|
}.bind(this); |
||||||
|
} else { |
||||||
|
nameFunc = this.params.name; |
||||||
|
} |
||||||
|
|
||||||
|
// Get the data into the right format.
|
||||||
|
for (var e = 0; e < data.length; e++) { |
||||||
|
var len = 0; |
||||||
|
for (var i = 0; i < data[e].Value.length; i++) { |
||||||
|
series[len++] = { |
||||||
|
data: data[e].Value[i].Values.map(function(s) {return {x: s.Timestamp, y: parseFloat(s.Value)} }), |
||||||
|
color: palette.color(), |
||||||
|
name: nameFunc(data[e].Value[i].Metric), |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
this._clearGraph(); |
||||||
|
if (!series.length) { |
||||||
|
var errorText = document.createElement("div"); |
||||||
|
errorText.className = 'prom_graph_error'; |
||||||
|
errorText.textContent = 'No timeseries returned'; |
||||||
|
this.graphTd.appendChild(errorText); |
||||||
|
return; |
||||||
|
} |
||||||
|
// Render.
|
||||||
|
var graph = new Rickshaw.Graph({ |
||||||
|
interpolation: "linear", |
||||||
|
width: this.graphTd.offsetWidth, |
||||||
|
height: this.params.height, |
||||||
|
element: this.graphTd, |
||||||
|
renderer: this.params.renderer, |
||||||
|
max: this.params.max, |
||||||
|
min: this.params.min, |
||||||
|
series: series |
||||||
|
}); |
||||||
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({ |
||||||
|
graph: graph, |
||||||
|
onRender: function() { |
||||||
|
var xLabel = this.element.getElementsByClassName("x_label")[0]; |
||||||
|
var item = this.element.getElementsByClassName("item")[0]; |
||||||
|
if (xLabel.offsetWidth + xLabel.offsetLeft + this.element.offsetLeft > graph.element.offsetWidth |
||||||
|
|| item.offsetWidth + item.offsetLeft + this.element.offsetLeft > graph.element.offsetWidth) { |
||||||
|
xLabel.classList.add("prom_graph_hover_flipped"); |
||||||
|
item.classList.add("prom_graph_hover_flipped"); |
||||||
|
} else { |
||||||
|
xLabel.classList.remove("prom_graph_hover_flipped"); |
||||||
|
item.classList.remove("prom_graph_hover_flipped"); |
||||||
|
} |
||||||
|
}, |
||||||
|
yFormatter: function(y) {return this.params.yHoverFormatter(y) + this.params.yUnits}.bind(this) |
||||||
|
}); |
||||||
|
var yAxis = new Rickshaw.Graph.Axis.Y({ |
||||||
|
graph: graph, |
||||||
|
tickFormat: this.params.yAxisFormatter |
||||||
|
}); |
||||||
|
var xAxis = new Rickshaw.Graph.Axis.Time({ |
||||||
|
graph: graph, |
||||||
|
}); |
||||||
|
var legend = new Rickshaw.Graph.Legend({ |
||||||
|
graph: graph, |
||||||
|
element: this.legendDiv |
||||||
|
}); |
||||||
|
xAxis.render(); |
||||||
|
yAxis.render(); |
||||||
|
graph.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
PromConsole.Graph.prototype._clearGraph = function() { |
||||||
|
while (this.graphTd.lastChild) { |
||||||
|
this.graphTd.removeChild(this.graphTd.lastChild); |
||||||
|
} |
||||||
|
while (this.legendDiv.lastChild) { |
||||||
|
this.legendDiv.removeChild(this.legendDiv.lastChild); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
PromConsole.Graph.prototype._xhrs = [] |
||||||
|
|
||||||
|
PromConsole.Graph.prototype.dispatch = function() { |
||||||
|
for (var j = 0; j < this._xhrs.length; j++) { |
||||||
|
this._xhrs[j].abort(); |
||||||
|
} |
||||||
|
var all_data = new Array(this.params.expr.length); |
||||||
|
this._xhrs = new Array(this.params.expr.length); |
||||||
|
var pending_requests = this.params.expr.length; |
||||||
|
for (var i = 0; i < this.params.expr.length; ++i) { |
||||||
|
var endTime = this.params.endTime; |
||||||
|
var url = "/api/query_range?expr=" + encodeURIComponent(this.params.expr[i]) |
||||||
|
+ "&step=" + this.params.duration / this.graphTd.offsetWidth |
||||||
|
+ "&range=" + this.params.duration + "&end=" + endTime; |
||||||
|
var xhr = new XMLHttpRequest(); |
||||||
|
xhr.open('get', url, true); |
||||||
|
xhr.responseType = 'json'; |
||||||
|
xhr.onerror = function(xhr, i) { |
||||||
|
this._clearGraph(); |
||||||
|
var errorText = document.createElement("div"); |
||||||
|
errorText.className = 'prom_graph_error'; |
||||||
|
errorText.textContent = 'Error loading data'; |
||||||
|
this.graphTd.appendChild(errorText); |
||||||
|
console.log('Error loading data for ' + this.params.expr[i]); |
||||||
|
pending_requests = 0; |
||||||
|
// onabort gets any aborts.
|
||||||
|
for (var j = 0; j < pending_requests; j++) { |
||||||
|
this._xhrs[j].abort(); |
||||||
|
} |
||||||
|
}.bind(this, xhr, i) |
||||||
|
xhr.onload = function(xhr, i) { |
||||||
|
if (pending_requests == 0) { |
||||||
|
// Got an error before this success.
|
||||||
|
return; |
||||||
|
} |
||||||
|
var data = xhr.response; |
||||||
|
pending_requests -= 1; |
||||||
|
all_data[i] = data; |
||||||
|
if (pending_requests == 0) { |
||||||
|
this._xhrs = []; |
||||||
|
this._render(all_data); |
||||||
|
} |
||||||
|
}.bind(this, xhr, i) |
||||||
|
xhr.send(); |
||||||
|
this._xhrs[i] = xhr; |
||||||
|
} |
||||||
|
|
||||||
|
var loadingImg = document.createElement("img"); |
||||||
|
loadingImg.src = '/static/img/ajax-loader.gif'; |
||||||
|
loadingImg.alt = 'Loading...'; |
||||||
|
loadingImg.className = 'prom_graph_loading'; |
||||||
|
this.graphTd.appendChild(loadingImg); |
||||||
|
}; |
||||||
|
|
||||||
|
// Substitue the value of 'label' for [[ label ]].
|
||||||
|
PromConsole._interpolateName = function(name, metric) { |
||||||
|
var re = /(.*?)\[\[\s*(\w+)+\s*\]\](.*?)/g; |
||||||
|
var result = ''; |
||||||
|
while (match = re.exec(name)) { |
||||||
|
result = result + match[1] + metric[match[2]] + match[3] |
||||||
|
} |
||||||
|
if (!result) { |
||||||
|
return name; |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
// Given the data returned by the API, return an appropriate function
|
||||||
|
// to return plot names.
|
||||||
|
PromConsole._chooseNameFunction = function(data) { |
||||||
|
// By default, use the full metric name.
|
||||||
|
var nameFunc = function (metric) { |
||||||
|
name = metric.__name__ + "{"; |
||||||
|
for (var label in metric) { |
||||||
|
if (label.substring(0,2) == "__") { |
||||||
|
continue; |
||||||
|
} |
||||||
|
name += label + "='" + metric[label] + "',"; |
||||||
|
} |
||||||
|
return name + "}"; |
||||||
|
} |
||||||
|
// If only one label varies, use that value.
|
||||||
|
var labelValues = {}; |
||||||
|
for (var e = 0; e < data.length; e++) { |
||||||
|
for (var i = 0; i < data[e].Value.length; i++) { |
||||||
|
for (var label in data[e].Value[i].Metric) { |
||||||
|
if (!(label in labelValues)) { |
||||||
|
labelValues[label] = {}; |
||||||
|
} |
||||||
|
labelValues[label][data[e].Value[i].Metric[label]] = 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
var multiValueLabels = []; |
||||||
|
for (var label in labelValues) { |
||||||
|
if (Object.keys(labelValues[label]).length > 1) { |
||||||
|
multiValueLabels.push(label); |
||||||
|
} |
||||||
|
} |
||||||
|
if (multiValueLabels.length == 1) { |
||||||
|
nameFunc = function(metric) { |
||||||
|
return metric[multiValueLabels[0]]; |
||||||
|
} |
||||||
|
} |
||||||
|
return nameFunc; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Given a list of expressions, produce the /graph url for them.
|
||||||
|
PromConsole._graphsToSlashGraphURL = function(exprs) { |
||||||
|
var data = []; |
||||||
|
for (var i = 0; i < exprs.length; ++i) { |
||||||
|
data.push({'expr' : exprs[i]}); |
||||||
|
} |
||||||
|
return '/graph#' + encodeURIComponent(JSON.stringify(data)); |
||||||
|
|
||||||
|
}; |
||||||
Loading…
Reference in new issue