{{/* 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="{{ pathPrefix }}static/vendor/rickshaw/rickshaw.min.css"> <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}static/vendor/bootstrap-3.3.1/css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}static/css/prom_console.css"> <script src="{{ pathPrefix }}static/vendor/rickshaw/vendor/d3.v3.js"></script> <script src="{{ pathPrefix }}static/vendor/rickshaw/vendor/d3.layout.min.js"></script> <script src="{{ pathPrefix }}static/vendor/rickshaw/rickshaw.min.js"></script> <script src="{{ pathPrefix }}static/vendor/js/jquery.min.js"></script> <script src="{{ pathPrefix }}static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script> <script>var PATH_PREFIX = "{{ pathPrefix }}";</script> <script src="{{ pathPrefix }}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.1f" }}{{ printf "%.1f" . }}{{ 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 }}" {{ 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 }} {{/* RHS table head, pass job name. Should be used after prom_right_table_head. */}} {{ define "prom_right_table_job_head" }} <tr> <th>{{ . }}</th> <th>{{ template "prom_query_drilldown" (args (printf "sum(up{job='%s'})" .)) }} / {{ template "prom_query_drilldown" (args (printf "count(up{job='%s'})" .)) }}</th> </tr> <tr> <td>CPU</td> <td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(rate(process_cpu_seconds_total{job='%s'}[5m]))" .) "s/s" "humanizeNoSmallPrefix") }}</td> </tr> <tr> <td>Memory</td> <td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(process_resident_memory_bytes{job='%s'})" .) "B" "humanize1024") }}</td> </tr> {{ end }} {{ define "prom_content_head" }} <div class="prom_console_content"> <div class="container"> {{ template "prom_graph_timecontrol" . }} {{ end }} {{ define "prom_content_tail" }} </div> </div> {{ end }} {{ define "prom_graph_timecontrol" }} <div class="prom_graph_timecontrol"> <div class="prom_graph_timecontrol_inner"> <div class="prom_graph_timecontrol_group"> <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range."> <i class="glyphicon glyphicon-minus"></i> </button> <input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration"> <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range."> <i class="glyphicon glyphicon-plus"></i> </button> </div> <div class="prom_graph_timecontrol_group"> <button class="btn btn-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time."> <i class="glyphicon glyphicon-backward"></i> </button> <input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value=""> <button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time."> <i class="glyphicon glyphicon-forward"></i> </button> </div> <div class="prom_graph_timecontrol_group"> <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left"> <button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh."> <i class="glyphicon glyphicon-repeat"></i> <span class="icon-repeat"></span> (<span id="prom_graph_refresh_button_value">Off</span>) </button> <button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false"> <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 }}