Lab
A Cloud Guru

Using the Graph Library in a Prometheus Console Template

Console templates provide a way to display real-time metric data in a useful format without the need for any external tools outside of Prometheus. With the console template graph library, you can even display graphs in order to visualize your data. In this lab, you will have the opportunity to implement some basic graphs within a console template. This will provide you with hands-on experience building graphs into your console templates.

Try for free Contact sales

Path Info

Level

Intermediate

Duration

45m

Published

Jun 12, 2020

Challenge

Build a Console Template with a Graph Displaying CPU Usage

Create and edit the console template file:

sudo vi /etc/prometheus/consoles/limedrop-web.html

Implement a graph displaying CPU usage:

{{template "head" .}}
{{template "prom_content_head" .}}
<h1>LimeDrop Web Server Metrics</h1>

<h3>CPU Usage</h3>
<div id="cpuGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#cpuGraph"),
  expr: "sum(rate(node_cpu_seconds_total{instance='limedrop-web:9100',mode!='idle'}[5m])) * 100 / 2"
})
</script>
{{template "prom_content_tail" .}}
{{template "tail"}}

View the console in a browser to verify it is working:

http://<PROMETHEUS_SERVER_PUBLIC_IP>:9090/consoles/limedrop-web.html

Challenge

Build a Console Template with a Graph Displaying Memory Usage

Edit the console template file:

sudo vi /etc/prometheus/consoles/limedrop-web.html

Implement a graph displaying memory usage:

{{template "head" .}}
{{template "prom_content_head" .}}
<h1>LimeDrop Web Server Metrics</h1>

<h3>CPU Usage</h3>
<div id="cpuGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#cpuGraph"),
  expr: "sum(rate(node_cpu_seconds_total{instance='limedrop-web:9100',mode!='idle'}[5m])) * 100 / 2"
})
</script>

<h3>Memory Usage</h3>
<div id="memGraph"></div>
<script>
new PromConsole.Graph({
  node: document.querySelector("#memGraph"),
  expr: "100 - (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes) * 100"
})
</script>
{{template "prom_content_tail" .}}
{{template "tail"}}

View the console in a browser to verify it is working:

http://<PROMETHEUS_SERVER_PUBLIC_IP>:9090/consoles/limedrop-web.html

Author

A Cloud Guru

The Cloud Content team comprises subject matter experts hyper focused on services offered by the leading cloud vendors (AWS, GCP, and Azure), as well as cloud-related technologies such as Linux and DevOps. The team is thrilled to share their knowledge to help you build modern tech solutions from the ground up, secure and optimize your environments, and so much more!

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.

Start learning by doing today

View Plans