mirror of
https://github.com/prometheus/prometheus
synced 2024-12-23 15:04:13 +00:00
3470ee1fbf
The React app's assets are now served under /assets, while all old custom web assets (including the ones for console templates) are now served from /classic/static. I tested different combinations of --web.external-url and --web.route-prefix with proxies in front, and I couldn't find a problem yet with the routing. Console templates also still work. While migrating old endpoints to /classic, I noticed that /version was being treated like a lot of the old UI pages, with readiness check handler in front of it, etc. I kept it in /version and removed that readiness wrapper, since it doesn't seem to be needed for that endpoint. Signed-off-by: Julius Volz <julius.volz@gmail.com>
139 lines
6.0 KiB
HTML
139 lines
6.0 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="{{ pathPrefix }}/classic/static/vendor/rickshaw/rickshaw.min.css">
|
|
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/vendor/bootstrap-4.5.2/css/bootstrap.min.css">
|
|
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/css/prom_console.css">
|
|
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/classic/static/vendor/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css">
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/vendor/d3.v3.js"></script>
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/rickshaw/rickshaw.min.js"></script>
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/js/jquery-3.5.1.min.js"></script>
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/js/popper.min.js"></script>
|
|
<script src="{{ pathPrefix }}/classic/static/vendor/bootstrap-4.5.2/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
var PATH_PREFIX = "{{ pathPrefix }}";
|
|
</script>
|
|
<script src="{{ pathPrefix }}/classic/static/js/prom_console.js"></script>
|
|
{{ end }}
|
|
|
|
{{/* Top of all pages. */}}
|
|
{{ define "head" -}}
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<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 "humanizePercentage" }}{{ humanizePercentage . }}{{ end }}
|
|
{{ define "humanizeTimestamp" }}{{ humanizeTimestamp . }}{{ 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="{{ pathPrefix }}{{ 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-sm">
|
|
{{ 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)(irate(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-fluid">
|
|
{{ 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-light pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
|
|
<i class="glyphicon glyphicon-minus"></i>
|
|
</button><!-- Comments between elements to remove spaces
|
|
--><input class="input pull-left align-middle" size="3" title="Time range of graph" type="text" id="prom_graph_duration"><!--
|
|
--><button class="btn btn-light 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-light 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 align-middle" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value=""><!--
|
|
--><button class="btn btn-light 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-light 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-light pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh."aria-haspopup="true" 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 }}
|