1{{/* vim: set ft=html: */}}
2{{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
3{{ define "prom_console_head" }}
4<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.css">
5<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
6<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/prom_console.css">
7<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.v3.js"></script>
8<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
9<script src="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.js"></script>
10<script src="{{ pathPrefix }}/static/vendor/js/jquery.min.js"></script>
11<script src="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
12
13<script>
14var PATH_PREFIX = "{{ pathPrefix }}";
15</script>
16<script src="{{ pathPrefix }}/static/js/prom_console.js"></script>
17{{ end }}
18
19{{/* Top of all pages. */}}
20{{ define "head" }}
21<html>
22<head>
23{{ template "prom_console_head" }}
24</head>
25<body>
26{{ template "navbar" . }}
27{{ template "menu" . }}
28{{ end }}
29
30{{ define "__prom_query_drilldown_noop" }}{{ . }}{{ end }}
31{{ define "humanize" }}{{ humanize . }}{{ end }}
32{{ define "humanizeNoSmallPrefix" }}{{ if and (lt . 1.0) (gt . -1.0) }}{{ printf "%.3g" . }}{{ else }}{{ humanize . }}{{ end }}{{ end }}
33{{ define "humanize1024" }}{{ humanize1024 . }}{{ end }}
34{{ define "humanizeDuration" }}{{ humanizeDuration . }}{{ end }}
35{{ define "humanizeTimestamp" }}{{ humanizeTimestamp . }}{{ end }}
36{{ define "printf.1f" }}{{ printf "%.1f" . }}{{ end }}
37{{ define "printf.3g" }}{{ printf "%.3g" . }}{{ end }}
38
39{{/* prom_query_drilldown (args expr suffix? renderTemplate?)
40Displays the result of the expression, with a link to /graph for it.
41
42renderTemplate is the name of the template to use to render the value.
43*/}}
44{{ define "prom_query_drilldown" }}
45{{ $expr := .arg0 }}{{ $suffix := (or .arg1 "") }}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop") }}
46<a class="prom_query_drilldown" href="{{ pathPrefix }}{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
47{{ end }}
48
49{{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&{{ end }}{{ end }}"
50
51{{ define "prom_right_table_head" }}
52<div class="prom_console_rhs">
53<table class="table table-bordered table-hover table-condensed">
54{{ end }}
55{{ define "prom_right_table_tail" }}
56</table>
57</div>
58{{ end }}
59
60{{/* RHS table head, pass job name. Should be used after prom_right_table_head. */}}
61{{ define "prom_right_table_job_head" }}
62<tr>
63 <th>{{ . }}</th>
64 <th>{{ template "prom_query_drilldown" (args (printf "sum(up{job='%s'})" .)) }} / {{ template "prom_query_drilldown" (args (printf "count(up{job='%s'})" .)) }}</th>
65</tr>
66<tr>
67 <td>CPU</td>
68 <td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(irate(process_cpu_seconds_total{job='%s'}[5m]))" .) "s/s" "humanizeNoSmallPrefix") }}</td>
69</tr>
70<tr>
71 <td>Memory</td>
72 <td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(process_resident_memory_bytes{job='%s'})" .) "B" "humanize1024") }}</td>
73</tr>
74{{ end }}
75
76
77{{ define "prom_content_head" }}
78<div class="prom_console_content">
79 <div class="container">
80{{ template "prom_graph_timecontrol" . }}
81{{ end }}
82{{ define "prom_content_tail" }}
83 </div>
84</div>
85{{ end }}
86
87{{ define "prom_graph_timecontrol" }}
88<div class="prom_graph_timecontrol">
89 <div class="prom_graph_timecontrol_inner">
90 <div class="prom_graph_timecontrol_group">
91 <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
92 <i class="glyphicon glyphicon-minus"></i>
93 </button>
94 <input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration">
95 <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
96 <i class="glyphicon glyphicon-plus"></i>
97 </button>
98 </div>
99
100 <div class="prom_graph_timecontrol_group">
101 <button class="btn btn-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
102 <i class="glyphicon glyphicon-backward"></i>
103 </button>
104 <input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
105 <button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">
106 <i class="glyphicon glyphicon-forward"></i>
107 </button>
108 </div>
109
110 <div class="prom_graph_timecontrol_group">
111 <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
112 <button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh.">
113 <i class="glyphicon glyphicon-repeat"></i>
114 <span class="icon-repeat"></span>
115 (<span id="prom_graph_refresh_button_value">Off</span>)
116 </button>
117 <button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">
118 <span class="caret"></span>
119 </button>
120 <ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
121 </ul>
122 </div>
123 </div>
124 </div>
125 <script>
126 new PromConsole.TimeControl();
127 </script>
128</div>
129{{ end }}
130
131{{/* Bottom of all pages. */}}
132{{ define "tail" }}
133</body>
134</html>
135{{ end }}
View as plain text