Web Dashboard GUI for Kafka Cluster Monitoring
Tags: dashboard, monitoring
Published: 2023-12-06 09:27:40

---
title: Web Dashboard GUI for Kafka Cluster Monitoring
published: true
date: 2023-11-20 00:12:00 UTC
tags: Dashboard,Monitoring
canonical_url: https://reactjsexample.com/web-dashboard-gui-for-kafka-cluster-monitoring/
---

# Kurrent
 ![Web Dashboard GUI for Kafka Cluster Monitoring](https://reactjsexample.com/content/images/2023/11/Code_2023-11_21-07-30.jpg)

Apache Kafka cluster metrics visualizer

### Kurrent is an open-source project providing real-time Apache Kafka metrics data monitoring. Our tool is dedicated to providing developers an easy and intuitive means for monitoring the health and throughput of their Kafka cluster.

## ![Web Dashboard GUI for Kafka Cluster Monitoring](https://github.com/oslabs-beta/kurrent/raw/main/client/assets/kurrentBG2.png)

# Features

User profile: Sign up and login to your profile to store your Prometheus server connections for easy navigation between all your Kafka instances.

Real-Time Metrics: View your metrics in real-time with Kurrents intuitive dashboard charts to monitor the ongoing health of your cluster through testing or real-time use.

Prometheus Integration: Kurrent provides a sample Prometheus yaml to make it easy to setup your Kafka clusters for metrics monitoring

# Tech Stack

![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/aeddc848275a1ffce386dc81c04541654ca07b2c43bbb8ad251085c962672aea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a6176617363726970742d2532333332333333302e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d253233463744463145) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/ab4c3c731a174a63df861f7b118d6c8a6c52040a021a552628db877bd518fe84/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656163742d2532333230323332612e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d253233363144414642) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/6908bc5919e46cd787b8e5117f092f5ed37da82e8bd602e6339060ea0fff722c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656475782d3539334438383f7374796c653d666f722d7468652d6261646765266c6f676f3d7265647578266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/5b3ca2d1b32c9761d798a461ff3a6bd40f522ef83dfc9ae75eac6b75e4cc4843/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d6e6f64652d3333393933333f7374796c653d666f722d7468652d6261646765266c6f676f3d6e6f64652e6a73266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/127c6cbe0b4f0fc5ef8923d529b82f3672c60e3fde04fc1c6455db796359a7dc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f657870726573732d2532333430346435392e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d65787072657373266c6f676f436f6c6f723d253233363144414642) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/d92fb9cedf14c08cad1d542c4c6aa0dc954768afe5840c0d574e44e3b100eb29/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50726f6d6574686575732d4537353332443f7374796c653d666f722d7468652d6261646765266c6f676f3d70726f6d657468657573266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/ca41226a6b49aeaed734c8946db2267fabe0a92e914d3e87d48653351477c8dc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f506f737467726553514c2d3445413934423f7374796c653d666f722d7468652d6261646765266c6f676f3d706f737467726573266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/563de9116f70b094abf8afcd05bb1cf7cc2bb628464299623d6ddd4318130bb1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6170616368652532306b61666b612d2532333230323332612e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d6170616368656b61666b61266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/103e6bf48443918e5505b5bb83fd1d1a4e4edd3484fd1b221355fdbca962fdf5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a6573742d3332333333303f7374796c653d666f722d7468652d6261646765266c6f676f3d4a657374266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/81aeb1a947697457dbf01915ba8bb60e4bcf0c9003fc2d62659be9d5d5b47317/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374696e672532306c6962726172792d3332333333303f7374796c653d666f722d7468652d6261646765266c6f676f3d74657374696e672d6c696272617279266c6f676f436f6c6f723d726564) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/6b7f701cf0bea42833751b754688f1a27b6090fdf90bf2b226addff01be817f0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f636b65722d2532333064623765642e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d646f636b6572266c6f676f436f6c6f723d7768697465) ![Web Dashboard GUI for Kafka Cluster Monitoring](https://camo.githubusercontent.com/54e946109d2b9e96a8783ba5b50b653d0244c4d633c48fcf05109c8cd1537be8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f63686172742e6a732d4635373838442e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d63686172742e6a73266c6f676f436f6c6f723d7768697465)

* * *

## Getting Started

To install locally, fork and clone this Github repository.

- Create a .env file in the main directory and create a variable DB\_URI set equal to your PostgreSQL server instance URI
- Instanciate the database tables with the following commands:
  - `CREATE TABLE users ( user_id serial PRIMARY KEY, email VARCHAR(255) NOT NULL, username VARCHAR(255), password VARCHAR(255) NOT NULL, service_addresses text[])`
  - `CREATE TABLE sessions ( session_id serial PRIMARY KEY, user_id INT REFERENCES users(user_id), session_token VARCHAR(255) NOT NULL, login_time timestamp, session_status VARCHAR(20) DEFAULT 'active')`
  - In the terminal run:
    - `npm install`
    - `npm run dev`
  - Once the application is running, navigate to localhost:8080, create an account, and connect your Prometheus server with its ip:port address

# 

If you’re interested in the containerized version of Kurrent, it does exist!

- In your terminal, type
  - `docker pull kurrentio/kurrent:latest`
- An image of Kurrent will be installed onto your machine! From there, you can bypass the signup portion of the next section.
  - Keep in mind, your containerized image of Kurrent may not be able to access localhost. To alleviate this, when adding your ports on the client side of the Kurrent image you can use `machine-ip-address:port`, and replace the ip and port address to your prometheus configured endpoints.
  - Contributions to the Docker branch of Kurrent are also greatly welcomed.

## If you just want to test out our tool and don’t have a running Kafka cluster, feel free to look at the provided Demo Kafka Broker directory and its readme for instructions on how to start up a local Kafka broker using Docker.

## Using Kurrent

1. Create a User Account: Before you can use Kurrent, you’ll first need to sign up a new account. You can do this using your email, an optional username, and a password.

![Web Dashboard GUI for Kafka Cluster Monitoring](https://github.com/oslabs-beta/kurrent/raw/main/client/assets/SignUp.gif)

1. Connect Your Prometheus Server: Connecting your Prometheus server is as simple as clicking the “Add a Cluster” button, typing in you server address with the server ip address and prometheus exposed port number, and clicking the “Add” button. You should now see your address listed below. Simply click this address to see your metrics updating on the dashboard.

![Web Dashboard GUI for Kafka Cluster Monitoring](https://github.com/oslabs-beta/kurrent/raw/main/client/assets/AddServer.gif)

1. View Your Metrics: By default you will first see the overall health metrics of your cluster. By selecting the “Producer” or “Consumer” buttons, the dashboard will display metrics related to each, allowing you to see the impact of producers and consumers on your cluster health.

![Web Dashboard GUI for Kafka Cluster Monitoring](https://github.com/oslabs-beta/kurrent/raw/main/client/assets/Connect.gif)

1. Sign Out: When you are done monitoring your cluster for the day or want to signin to a new account, simply click the “Sign Out” button to return to the landing page.

![Web Dashboard GUI for Kafka Cluster Monitoring](https://github.com/oslabs-beta/kurrent/raw/main/client/assets/SignOut.gif)

## Contribute

If you’d like to contribute to the project and improve its current functionality or add a feature, please fork the repository and submit a pull request. Some of our planned future features include:

- Typescript migration
- User defined alerts
- User customizable dashboard. Choose what metrics to see over a chosen timeframe
- Open Authorization
- More testing coverage
- Save and compare metrics from past runs or between different clusters

## The Team

| 

<sub><b>Garrett Byrne</b></sub>

[Linkedin](https://www.linkedin.com/in/garrett-byrne12/) | [GitHub](https://github.com/G-Byrne)

 | 

<sub><b>Jensen Schmidt</b></sub>

[Linkedin](https://www.linkedin.com/in/jensen-schmidt/) | [GitHub](https://github.com/jensenrs)

 | 

<sub><b>Michael Newbold</b></sub>

[Linkedin](https://www.linkedin.com/in/mjnewbold/) | [GitHub](https://github.com/MichaelNewbold)

 | 

<sub><b>Swarna Muralidharan</b></sub>

[Linkedin](https://www.linkedin.com/in/swarna-muralidharan-52a57b29b) | [GitHub](https://github.com/swarna2072)

 |

## GitHub

[View Github](https://github.com/oslabs-beta/kurrent?ref=reactjsexample.com)