Console Templates

In this lesson we’ll explore Prometheus’ built-in visualization option: console templates. Console templates let you build custom HTML pages using Go templating. Inside these pages you can embed Prometheus metrics, PromQL queries, and charts — effectively creating small, reusable dashboards by composing template fragments for headers, footers, content blocks, and drilldowns.

A dark-themed slide titled "Console Templates" explaining that console templates let you create custom HTML pages using Go templating, and that Prometheus metrics, queries, and charts can be embedded in those templates. Two words ("Console templates" and "embedded") are highlighted.

Where console templates live

Template files are stored on disk, typically under /etc/prometheus/consoles.
Prometheus ships with several example templates you can reuse or adapt.
Templates are rendered at request time; you usually do not need to restart Prometheus after adding or editing files (permissions permitting).

Typical directory listing (example)

Filename	Size	Modified	Notes
`demo.html`	383	Nov 15 04:42	Minimal demo template
`index.html.example`	616	Nov 12 23:20	Example index demonstrating template composition
`node-cpu.html`	2675	Nov 12 23:20	Node CPU example
`node-disk.html`	3522	Nov 12 23:20	Node disk I/O example
`node.html`	1453	Nov 12 23:20	Node metrics
`node-overview.html`	5783	Nov 12 23:20	Dashboard-like node overview
`prometheus.html`	1334	Nov 12 23:20	Prometheus server page
`prometheus-overview.html`	4103	Nov 12 23:20	Prometheus overview dashboard

You can also inspect the directory directly:

$ ls -l /etc/prometheus/consoles/
total 40
-rw-r--r-- 1 prometheus prometheus 383 Nov 15 04:42 demo.html
-rw-r--r-- 1 prometheus prometheus 616 Nov 12 23:20 index.html.example
-rw-r--r-- 1 prometheus prometheus 2675 Nov 12 23:20 node-cpu.html
-rw-r--r-- 1 prometheus prometheus 3522 Nov 12 23:20 node-disk.html
-rw-r--r-- 1 prometheus prometheus 1453 Nov 12 23:20 node.html
-rw-r--r-- 1 prometheus prometheus 5783 Nov 12 23:20 node-overview.html
-rw-r--r-- 1 prometheus prometheus 1334 Nov 12 23:20 prometheus.html
-rw-r--r-- 1 prometheus prometheus 4103 Nov 12 23:20 prometheus-overview.html

Understanding template composition

Anything inside double curly braces {{ ... }} is a Go template expression.
Most console files import shared template fragments such as head, tail, and content wrappers.
Built-in helper templates (e.g., prom_query_drilldown) render metric values and provide clickable drilldowns into the Prometheus expression browser.

Example excerpt from index.html.example (kept in the template directory):

{{ template "head" . }}
{{ template "prom_right_table_head" }}
{{ template "prom_right_table_tail" }}
{{ template "prom_content_head" . }}

<h1>Overview</h1>
<p>These are example consoles for Prometheus.</p>
<p>These consoles expect exporters to have the following job labels:</p>

<table class="table table-sm table-striped table-bordered" style="width: 0%">
<tr>
  <th>Exporter</th>
  <th>Job label</th>
</tr>
<tr>
  <td>Node Exporter</td>
  <td><code>node</code></td>
</tr>
<tr>
  <td>Prometheus</td>
  <td><code>prometheus</code></td>
</tr>
</table>

{{ template "prom_content_tail" . }}
{{ template "tail" }}

Viewing consoles in the browser Open your Prometheus web UI and navigate to the /consoles path, for example: http://<prometheus-server>:9090/consoles/index.html.example The example consoles include dashboard-like pages such as a Node overview which shows CPU, disk I/O, memory, and a right-hand summary panel for system stats.

A Prometheus Node Overview dashboard screenshot showing metrics for host 192.168.1.168:9100, with graphs for CPU usage, Disk I/O utilization and memory, plus a right-hand summary panel of CPU, memory, network and filesystem stats. The left side shows a Linux desktop with a Firefox window and application launcher.

Console templates are served directly from disk under /consoles. Ensure the Prometheus process can read any files you add there. Templates are loaded at request time, so you generally do not need to restart Prometheus after adding or modifying a console file.

Key built-in template helpers (common)

Helper template	Purpose
`head` / `tail`	Injects the shared HTML head/footer, CSS and JS used by Prometheus consoles.
`prom_content_head` / `prom_content_tail`	Wraps core content regions for consistent layout.
`prom_query_drilldown`	Renders a metric value and links it to the expression browser for drilldown.
`prom_right_table_head` / `prom_right_table_tail`	Layout helpers for right-hand summary panels.

A minimal example: creating `demo.html`

This step-by-step shows how to create a small console that uses the shared header/footer, displays a metric value as a clickable drilldown, and embeds a chart by referencing Prometheus’ own graph UI inside an iframe.

Change to the consoles directory and open an editor:

cd /etc/prometheus/consoles/
sudo vi demo.html

Paste the following HTML (this is regular HTML using Go template expressions to include the shared fragments):

{{ template "head" . }}
{{ template "prom_content_head" . }}

<h1>Memory details</h1>

<p>Active memory:
  {{ template "prom_query_drilldown" "node_memory_Active_bytes" }}
</p>

<!-- A simple container for an embedded graph -->
<div id="graph-container" style="width:100%; height:320px;">
  <!-- Embed the Prometheus graph UI for this expression via an iframe -->
  <iframe
    src="/graph?g0.expr=node_memory_Active_bytes&g0.tab=0"
    style="width:100%; height:100%; border:0;"
    title="node_memory_Active_bytes graph">
  </iframe>
</div>

{{ template "prom_content_tail" . }}
{{ template "tail" }}

Notes:

The {{ template "prom_query_drilldown" "node_memory_Active_bytes" }} line renders the current value and makes it clickable so it opens the expression in Prometheus’ expression browser.
Using an iframe that points to /graph embeds Prometheus’ graph UI for that PromQL expression. This is a simple, compatible way to present charts without external dashboard tools.

Save and open the page:

http://<prometheus-server>:9090/consoles/demo.html You should see the shared header, the H1 title, the active memory value rendered by the drilldown template, and an embedded time-series graph for node_memory_Active_bytes. Example rendered metric text might look like:

active memory: 9.16094976e+08

Clicking the drilldown will open the expression browser with the series, for example:

node_memory_Active_bytes
node_memory_Active_bytes{instance="192.168.1.168:9100", job="node"}

If you add files under /etc/prometheus/consoles, ensure ownership and permissions allow the Prometheus process to read them (e.g., chown prometheus:prometheus and appropriate chmod). Otherwise the templates will not be served.

What you can build with console templates

Small, focused dashboards that combine metric values, charts, tables, and drilldowns.
Reusable template fragments for organization-wide dashboards (headers, sidebars, footers).
Per-host or per-service pages that link directly into the Prometheus expression browser.

Links and references

Introduction

Observability Fundamentals

Prometheus Fundamentals

PromQL

Dashboarding & Visualization

Application Instrumentation

Service Discovery

Push Gateway

Alerting

Monitoring Kubernetes

Conclusion

Scaling & Long Term Storage

A minimal example: creating `demo.html`

Watch Video

Practice Lab

​A minimal example: creating demo.html

Watch Video

Practice Lab

A minimal example: creating `demo.html`