Creating console templates from scratch has a steep learning curve. Unlike in Grafana, console templates are crafted directly in HTML and JavaScript, with a fair dose of Go templating in the mix. This means that consoles can technically take any form, but for simplicity, we will stick to the structure provided by the built-in console libraries.

The libraries that power the example console templates define the scaffold for the consoles. They take care of things such as constructing the HTML structure, including the necessary CSS and JavaScript and modeling the four sections around the main console content: the navigation bar at the top, the menu on the left, the console time controls at the bottom, and a table to show summary statistics on the right. Let's see how we could use them to construct a simple console template by looking at the following code:

{{template "head" .}}

{{template "prom_content_head" .}}

The head template expands to HTML that defines the inclusion of CSS and JavaScript, the top navbar, and the menu; the prom_content_head template on the other hand, defines the time controls, as shown in the following code:

<h1>Grafana</h1>

<h3>Requests by endpoint</h3>
<div id="queryGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#queryGraph"),
  expr: "sum(rate(http_request_total{job='grafana'}[5m])) by (handler)",
  name: '[[ handler ]]',
  yAxisFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
  yHoverFormatter: PromConsole.NumberFormatter.humanizeNoSmallPrefix,
  yUnits: "/s",
  yTitle: "Requests"
})
</script>

This section defines the console itself. The queryGraph element is used as the placeholder that the graphing JavaScript library will use to generate the graph. The JavaScript snippet, on the other hand, configures the graph with the selector that is to be used (node), what expression to graph (expr), what to use in the legend (name), and several y-axis configurations, as shown in the following code:

{{template "prom_content_tail" .}}

{{template "tail"}}

The last two templates close the sections that the first opened. They are needed so that the generated HTML is well formed.

The resulting console is available in the test environment for this chapter, and can be checked out at http://192.168.42.10:9090/consoles/grafana.html. Here is a screenshot of how it should look:

Note that the menu on the left-hand side does not have a link to our newly created console template. This is because the included menu.lib only supports the example console templates that ship with Prometheus. When deploying actual custom console templates, you would need to replace this library with your own. This would allow you to add links to other internal systems in the navbar at the top and list which consoles should be available on the navigation menu on the left. By leveraging the fact that you can perform PromQL queries in templates, you should be able to find out which jobs are scraped by that Prometheus instance and generate links to similarly named consoles.