An open-source electron app used for monitoring, visualizing, and alerting users
Tags: monitoring
Published: 2023-12-27 18:28:05

---
title: An open-source electron app used for monitoring, visualizing, and alerting users
published: true
date: 2023-12-09 02:17:54 UTC
tags: Monitoring
canonical_url: https://reactjsexample.com/an-open-source-electron-app-used-for-monitoring-visualizing-and-alerting-users/
---

 ![An open-source electron app used for monitoring, visualizing, and alerting users](https://reactjsexample.com/content/images/2023/12/Code_2023-12_10-22-14.jpg)

![An open-source electron app used for monitoring, visualizing, and alerting users](https://github.com/oslabs-beta/KafOpticon/raw/main/assets/kafopticon.png)

# KafOpticon

Kafka Cluster Monitor and Visualizer

## Built With

[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/00c2f0b069266807fd68633c7230ecb77c682ad824ad976f821a55b866ad61d7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d52656163742d3631444146423f7374796c653d666c61742d737175617265266c6f676f3d7265616374266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/6dd33307985a08dbef2d2478465fa92f65bd78e45395693e9750582b1cd88055/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d48544d4c2d4533344632363f7374796c653d666c61742d737175617265266c6f676f3d68746d6c35266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/755d9ba4024c87b45bbfadcd5989f629b04c0f1f47e66c8bdf69a49e56da1935/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4353532d3135373242363f7374796c653d666c61742d737175617265266c6f676f3d63737333266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/b68abf1a292873c243aadd1f336d68cb0b374253c03c74033469013014df2306/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4e6f64652e6a732d3333393933333f7374796c653d666c61742d737175617265266c6f676f3d6e6f6465646f746a73266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/efd62dbd0acc4459f0e97d75e26c0475eeb385078d542cad1d13e8bb0b2cb8ce/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d457870726573732d3030303030303f7374796c653d666c61742d737175617265266c6f676f3d65787072657373266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/e0147f0edff52ce51a11bd63ff02ed510dce76d5cf2b86c24384463ab0318a6e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4a6573742d4332313332353f7374796c653d666c61742d737175617265266c6f676f3d6a657374266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/1a0d2b0483bb04f94cdad64bf219ec82bdf597e47de3734c00d99baad7b68444/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d5765627061636b2d3844443646393f7374796c653d666c61742d737175617265266c6f676f3d7765627061636b266c6f676f436f6c6f723d626c61636b)](#)

[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/204410115a0bb658668e7446bfc6a7eadb6a96a98d81daba65ddaaa541e95f58/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d446f636b65722d3234393645443f7374796c653d666c61742d737175617265266c6f676f3d646f636b6572266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/ed64e882401bac7f77d3819da4137d619673f9042bf54dc8d10275cd2a6e2d95/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4170616368652532304b61666b612d3233314632303f7374796c653d666c61742d737175617265266c6f676f3d6170616368656b61666b61266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/2604c1e99417c519bce1db6d9042248000ec76e13c27b59e7a4a1720aa2cca1a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d50726f6d6574686575732d4536353232433f7374796c653d666c61742d737175617265266c6f676f3d70726f6d657468657573266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/47d7d91a5dd000b4de4e92559f515d0e7ad05967c02bc1ac9fccda00cb669bba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d47726166616e612d4634363830303f7374796c653d666c61742d737175617265266c6f676f3d67726166616e61266c6f676f436f6c6f723d7768697465)](#)[![An open-source electron app used for monitoring, visualizing, and alerting users](https://camo.githubusercontent.com/4fe1375de00852b559df6a32616c457bdca6807ae0495633a17cbff27bfa259d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d456c656374726f6e2d3437383438463f7374796c653d666c61742d737175617265266c6f676f3d656c656374726f6e266c6f676f436f6c6f723d7768697465)](#)

# About the Project

**What:** KafOpticon is an open-source electron app used for monitoring, visualizing, and alerting users of Kafka cluster/server metrics. Kafka is a powerful open-source data stream processing software platform. KafOpticon article can be found[here](https://medium.com/@gosoriocanales/monitor-and-visualize-your-kafka-clusters-with-kafopticon-3a08b1db822d).

**Why:** Monitoring relevant cluster metrics is challenging due to the volume and accessibility of the metrics. KafOpticon aims to solve these problems by providing REAL-TIME monitoring, visualization, and alert features. ![An open-source electron app used for monitoring, visualizing, and alerting users](https://github.com/oslabs-beta/KafOpticon/raw/main/assets/HealthPerformance.gif)

**Submit JMX Port Numbers**![An open-source electron app used for monitoring, visualizing, and alerting users](https://github.com/oslabs-beta/KafOpticon/raw/main/assets/Submit.gif)

Customize your own dashboard with user-selected metrics for more granular control. ![An open-source electron app used for monitoring, visualizing, and alerting users](https://github.com/oslabs-beta/KafOpticon/raw/main/assets/CreateDashboard.gif)

**Customize Automatic Email Alerts**![An open-source electron app used for monitoring, visualizing, and alerting users](https://github.com/oslabs-beta/KafOpticon/raw/main/assets/Alerts.gif)

**Dependencies:** Grafana and Prometheus

# Installation

To install as an app, navigate to the releases page of our repository, find the file that matches your OS, and download it.

Additionally, you could clone this repository, run `npm install` and then`npm start` to run the app from source code.

It is also possible to clone the repository, checkout into the electron-builder branch that matches your OS, and execute `npm run dist`. The app will be in the out/ folder at the repository’s root.

## Using KafOpticon with Docker-mediated Prometheus and Grafana

KafOpticon is specially designed for ease of monitoring Kafka clusters. It automatically generates Prometheus and Grafana containers in Docker, which connect to the metrics endpoints you provide. This setup uses JMX Exporter’s JMX-Prometheus Java Agent to scrape metric endpoints from each Kafka cluster.

### Configuration Steps:

1. **Set Up Your Kafka Cluster for Monitoring:**

2. **Connect KafOpticon to Your Cluster:**

### Monitoring with Docker Desktop:

- After setting up, monitor the process in Docker Desktop. Prometheus and Grafana containers will be built for monitoring your cluster.
- Allow KafOpticon some time to refresh as these containers are built and monitoring information is sent to the app.
- If the dashboard is not displaying as expected, press `Command+R` (or `Ctrl+R`on Windows) to refresh the page.
- Regularly check Docker Desktop to ensure the Prometheus and Grafana containers are running as expected. Restart any containers that have exited to troubleshoot potential issues.

## Run Docker Test

If you want to test the app, but you don’t have your own Kafka cluster, follow the directions below.

1. Preconditions:

2. Run Kafka Test Cluster in Docker:

3. Run Electron:

- Run electron with `npm start` in the root directory.

```
npm start
```

1. Start Monitoring:

- Provide a comma-separated list of the exposed JMX Endpoints of your Kafka cluster (9991, 9992, 9993 if using the provided docker-compose file), check the “send to Docker monitoring checkbox”, and hit send. Monitor the setup in Docker Desktop and refresh the app as needed using `COMMAND+R`.

1. Stop Docker Test:

- Stop the prometheus and grafana containers, and run `docker-compose down`within the docker-test directory.

```
docker-compose down
```

## Run local test

1. Preconditions:

2. Open up two terminals in the root directory.

3. Run `npm run bootZoo` and `npm run bootKaf1` in the separate terminals.

```
npm run bootZoo

npm run bootKaf1
```

1. Open up a terminal in the root directory. Run `npm start` in the root directory

```
npm start
```

1. In the electron app, type ‘2020’ into the form, check ‘send to local monitoring’ and submit it. Wait. Refresh if necessary. Click into performance or health metrics. Data on the kafka cluster should be displayed.

## Customization

KafOpticon offers flexible customization options for both locally mediated and Docker-mediated testing environments.

### Customizing Monitoring Dashboard:

- **Pre-configured Panels:** You can configure an additional monitoring tab with up to 10 panels of pre-selected metrics.
- **Grafana Dashboard Customization:**
  1. Navigate to `localhost:3000` in your browser.
  2. Click into `Dashboards`, and locate a dashboard titled _KafOpticon Dashboard_.
  3. Use the features of Grafana to customize your dashboard to your preference.

### Making Customizations Persistent:

- **Saving Changes in Grafana:**

- **Updating the Source Code:**

By following these steps, you can tailor the KafOpticon monitoring experience to better suit your specific needs and preferences.

# Alerts

In order to enable automatic alerts an email and app password are required. The easiest way to do this is to provide a gmail username and an app password in the relevant fields of the alerts dashboard. After clicking the submit button, you must restart Grafana for the changes to take place. After Grafana has been restarted, you are now free to add any emails you want to receive the alerts in the Grafana alerts contact points. You can send test email using the test button. Configure and customize threshholds for the alerts within Grafana. Congratulations! 🏆️ You should now be able to receive automatic email alerts about your Kafka clusters.

# Road Map

| Feature | Status |
| --- | --- |
| Visualize Kafka Cluster | ✅ |
| User Customized Dashboard | ⏳ |
| Testing | ⏳ |
| Windows Distribution | ⏳ |
| Enhance Security | 🙏🏻 |
| Enable Connecting to Remote Cluster | 🙏🏻 |

- ✅ = Ready to use
- ⏳ = In progress
- 🙏🏻 = Looking for contributors

# Bugs

Please report bugs to the [issues](https://github.com/oslabs-beta/KafOpticon/issues) tab.

# Contributing

Contributions are what make the open source community a great place! If you would like to contribute to this project take the steps below:

1. Fork the Project
2. Create a Feature Branch Use `git checkout -b newFeature`

```
git checkout -b newFeature
```

1. Commit your Changes Use `git commit -m newFeature`

```
git commit -m newFeature
```

1. Push to the Branch Use `git push origin newFeature`

```
git push origin newFeature
```

1. Open a Pull Request

# Contributors

[https://github.com/anewatech](https://github.com/anewatech) [https://github.com/GOsorioCanales](https://github.com/GOsorioCanales)[https://github.com/kelaompachai](https://github.com/kelaompachai) [https://github.com/zackweiss](https://github.com/zackweiss)

## GitHub

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