Example of console templates in Prometheus

A console template allow you to create your own custom html pages using Go templating language.
Prometheus metrics, queries and charts can be embedded in this templates.

For example - we will create a simple template. Let's go to the /etc/prometheus/consoles/ and create a file node_stats.html with following contents:

{{ template "head" . }}
{{ template "prom_content_head" . }}
<h1>Node Stats</h1>
<h3>Memory</h3>
<strong>Memory utilization:</strong>{{ template "prom_query_drilldown" (args "node_memory_MemAvailable_bytes/node_memory_MemTotal_bytes*100") }}
<h3>CPU</h3>
<div id="cpu"></div>
<script>
new PromConsole.Graph({
        node: document.querySelector("#cpu"),
        expr: "sum(rate(node_cpu_seconds_total{mode!='idle'}[2m]))*100/2"
  })
</script>
{{ template "prom_content_tail" . }}
{{ template "tail" }}

Explanation: You can see that the query can be embedded into template "prom_query_drilldown" as an argument.

To embed the chart, first a div should be defined and the JavaScript function PromConsole.Graph with parameters should be called.

Save and navigate to http://127.0.0.1:9090/consoles/node_stats.html - you will see the template.

More examples could be found in the same folder - /etc/prometheus/consoles/, also you can check the documentation.