Skip to main content
Console templates are Prometheus’ built-in way to create small, custom HTML pages using the Go templating language. They let you embed Prometheus metrics, PromQL queries, and interactive charts to build compact dashboards or drill-down views that live on your Prometheus server.
The image contains text explaining that console templates allow for custom HTML page creation using Go templating language, and Prometheus metrics can be embedded in the templates.
Key points:
  • Console templates are plain HTML files augmented with Go template expressions ({{ ... }}).
  • Templates can call shared fragments (for consistent header/footer/styles).
  • Built-in console JS helpers provide drilldowns and chart rendering.
Location Typically the built-in console templates are stored in /etc/prometheus/consoles. Listing that folder shows several example pages. You can also inspect the raw directory contents:
The pages are standard HTML mixed with Go template directives. For example, index.html.example uses fragments like head, tail, and prom_content_tail to assemble the page layout:
Open these pages in your browser by pointing to the Prometheus server under the /consoles path, for example: http://<prometheus-host>:9090/consoles/index.html.example The example pages include job/instance lists, useful charts (CPU, memory, disk, network), and drill-down links for inspecting query expressions.
The image displays a Prometheus dashboard showing the node overview for IP 192.168.1.168:9100, with graphs for CPU usage, Disk I/O utilization, and Memory usage. Various metrics such as user CPU, system CPU, memory details, network data, and disk utilization are listed on the right.
Built-in consoles are utilitarian but easy to modify. Below are concise steps to create a simple console page, embed a metric drilldown, and render a chart using the console JS helpers.
Console templates are regular HTML files using Go templates. Reuse provided fragments like head, prom_content_head, and tail for consistent styling and JS helpers. You can embed PromQL expressions and use built-in widgets for drilldowns and graphs.

​
Create a simple console (demo.html)

Follow these steps to create a minimal custom console that displays a metric value and a chart.
  1. Create the file in the consoles directory:
  1. Use the standard fragments for header and footer. These provide the required CSS/JS and layout:
  1. Replace the middle area with your page content. Save the following as /etc/prometheus/consoles/demo.html. This example:
    • Renders a page header,
    • Inserts the current value of node_memory_Active_bytes as a clickable drilldown,
    • Adds a chart that visualizes the same metric.
  1. Open your new console page in a browser:
http://<prometheus-host>:9090/consoles/demo.html You should see:
  • The header/footer and CSS from the included fragments,
  • An H1 “Memory details”,
  • A rendered metric value for node_memory_Active_bytes as a clickable link showing label details and the PromQL expression,
  • A chart rendered inside #graph showing the metric over time.
Example metric text shown by the drilldown widget:
Tips and recommended usage
  • Use {{ template "prom_query_drilldown" (args "<metric_name>") }} to create clickable metric values that show expression details.
  • Use new PromConsole.Graph({...}) to render interactive charts using the console JS library.
  • Reuse fragments such as head, prom_content_head, prom_content_tail, and tail to keep consistent layout and load required JS/CSS.
  • Combine multiple graphs, tables, and fragments to build richer dashboards or drill-down pages.
Links and References

Watch Video

Practice Lab