mirror of
https://github.com/prometheus/prometheus.git
synced 2024-11-10 23:54:05 -08:00
43b105d32d
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: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59
113 lines
4.3 KiB
HTML
113 lines
4.3 KiB
HTML
{{/* 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}}
|