Grafna Prometheus Dashboard

  1. ➜ GitHub Repository Link

  2. ➜ Download Python

Introduction

Hey everyone! In today’s article, I’m going to show you how to monitor your web app like a pro using Prometheus and Grafana. These are some of the most powerful tools in the DevOps world to track metrics and visualize data from your applications. Whether you’re running a simple web server or a complex system, this setup is a game-changer for monitoring and performance insights.

We’ll set up a Flask web app, configure Prometheus to scrape metrics, and visualize them beautifully in Grafana. And the best part? It’s all containerized with Docker for easy deployment!

Here’s what we’ll cover today:

  1. Setting up Prometheus, Grafana, and our Flask app.
  2. Configuring metrics in Prometheus.
  3. Visualizing them in Grafana.

By the end of this article, you’ll have a fully functional monitoring setup for your own projects.

Setting Up the Environment

Alright, let’s start by walking through the files we’ll be using.

Git Clone the repository provided above.

First up, we have the .env file. This contains sensitive configuration details like PROMETHEUS_HEX, a shared key that’s loaded into our Flask app. This keeps our sensitive data out of the main codebase for better security. To generate the key, open the terminal and run the command:

openssl rand -hex 32

Copy and paste the hex key generated.

Next, we have app.py, our Flask application. It serves web pages and tracks metrics like endpoint clicks, request size, response size, active requests, database query time, response times, and errors. The prometheus_client library helps expose these metrics to Prometheus, which will scrape them periodically. We’ll dive deeper into this file when we talk about metrics.

The requirements.txt file lists the dependencies we need to run the Flask app: Flask, Prometheus Client, Requests, and Python Dotenv.

Our Dockerfile defines how we containerize the Flask app. It installs dependencies, sets up the working directory, and exposes port 5001, where our app runs.

The heart of our setup: docker-compose.yml. It orchestrates multiple services, including Prometheus, Grafana, and our Flask app. Each service runs in its own container, making the entire stack modular and easy to manage.

Then we have the Prometheus configuration file, prometheus.yml. It tells Prometheus where to scrape metrics from, such as our Flask app and Node Exporter, which collects system-level metrics."

And finally, grafana.ini. This is a simple configuration file for Grafana, where we define the admin credentials and server settings. It ensures Grafana is set up the way we need it right from the start."

Dockerize the App

With the Dockerfile, we can build a container image for our Flask app. The docker-compose.yml file we discussed earlier references this image to deploy the app as part of our stack.

To build the image, all you need to do is run docker-compose build. This will package the app and make it ready for deployment.

docker-compose build

Grafana Setup

With Grafana configured, we can start the entire stack by running docker-compose up -d. This will bring up all the services, including Prometheus, Node Exporter, the Flask app, and Grafana.

Switch to the browser and navigate to http://localhost:3000. Log in with the admin credentials specified in grafana.ini file.

Adding Prometheus as a Data Source in Grafana

Now that Grafana is up and running, let’s add Prometheus as a data source. This allows Grafana to pull metrics from Prometheus for visualization. Follow these steps:

From the home screen, click on ‘Add your first data source’. This will bring up a list of supported data sources.

Select ‘Prometheus’ from the list. This tells Grafana that we want to connect to a Prometheus server.

In the ‘HTTP’ section, enter the URL for Prometheus. Since we’re using Docker Compose, the service name prometheus resolves to our Prometheus container, and it’s running on port 9090. So, the URL is http://prometheus:9090.

Scroll down and click ‘Save & Test’. Grafana will try to connect to the Prometheus server. If everything is set up correctly, you’ll see a success message.

That’s it! Prometheus is now added as a data source. Next, let’s create a dashboard to visualize some metrics from our app.

Creating Dashboards and Panels in Grafana

Now let’s create a dashboard in Grafana to visualize our metrics. Dashboards are collections of panels, each displaying specific data. Here’s how to set it up.

Click ‘Add new panel’ to start building your first visualization. This will take you to the panel editor.

In the query editor, you can enter a PromQL query to fetch data from Prometheus. For example, let’s visualize the endpoint_clicks_total metric, which tracks the total clicks on each endpoint. As you type, the graph updates to show the data in real-time.

You can customize your graph further by adding labels. This makes it easier to distinguish between metrics from different endpoints.

Once you’re happy with the panel, click ‘Apply’ to save it to the dashboard.

Let’s add another panel to visualize the response times for our endpoints. For this, we’ll use the endpoint_latency_seconds metric. A histogram is a great way to analyze latency distribution over time.

You can repeat this process to add more panels for different metrics, like errors or system-level data from Node Exporter. Once you’ve added all the panels you need, your dashboard is ready to monitor your app in real-time!

Testing the Monitoring Setup

Now that everything is set up, let’s test the monitoring setup to make sure everything is working as expected.

Visit different endpoints on the Flask app, such as /about, /contact, and even trigger some errors by hitting the /error1 endpoint. As you do this, the metrics for each endpoint will be logged and sent to Prometheus.

In Grafana, you’ll see the panels updating in real-time with data from Prometheus. Metrics like the number of clicks per endpoint, response times, and error rates should all be visible.

You can also adjust the time range in Grafana to see data over a specific period. This makes it easy to spot trends or investigate performance issues.

With everything working, you now have a fully functional monitoring setup for your Flask app. Prometheus collects the metrics, and Grafana visualizes them, giving you valuable insights into your app’s performance.

Conclusion

That’s it for today’s article! You’ve learned how to monitor your web app with Prometheus and Grafana, including setting up Docker Compose, configuring Prometheus, containerizing your Flask app, and visualizing metrics in Grafana.

Thanks for reading, and happy coding!

Topics