├── .DS_Store ├── .dockerignore ├── .env.example ├── .gitignore ├── .prettierrc.json ├── .vscode └── settings.json ├── Dockerfile ├── README.md ├── client ├── NavbarContext.jsx ├── app.jsx ├── components │ ├── add-cluster-form.jsx │ ├── add-message-form.jsx │ ├── add-topic-form.jsx │ ├── aggregated-chart.jsx │ ├── authForm.jsx │ ├── card.jsx │ ├── chart.jsx │ ├── cluster-item.jsx │ ├── delete-topic-from.jsx │ ├── drawer-side.jsx │ ├── footer.jsx │ ├── messages.jsx │ ├── nav-bar.jsx │ ├── performance-statistics.jsx │ ├── snapshot-comparison.jsx │ ├── switch-cluster-form.jsx │ ├── table-data.jsx │ └── topic-buttons.jsx ├── containers │ ├── NotFound.jsx │ ├── about-us.jsx │ ├── auth.jsx │ ├── cluster-history.jsx │ ├── dashboard-container.jsx │ └── landing-page-container.jsx ├── helper │ ├── dateFormatter.js │ └── mapChartData.js ├── index.js ├── resources │ └── images │ │ └── 404-dog.jpg └── static │ ├── DariaMordvinov.jpg │ ├── DisonRuan.jpg │ ├── JasonKuyper │ ├── JasonKuyper.jpg │ ├── KafkaCompassDashboard.jpg │ ├── KafkaCompassDashboard2.png │ ├── KafkaCompassDashboard3.png │ ├── KafkaCompassPerformanceStatsDemo.gif │ ├── KevinDooley.png │ ├── RyanZarou.png │ ├── Screenshot1.png │ ├── Screenshot2.png │ ├── Screenshot3.png │ ├── Screenshot4.png │ ├── cat.jpg │ ├── clusterHistory.gif │ ├── clusterHistoryScreenshot.png │ ├── clusterHistoryScreenshot2.png │ ├── consumeMessages.gif │ ├── contentMonitoringScreenshot.png │ ├── contentMonitoringScreenshot2.png │ ├── favicon.ico │ ├── homeIcon.png │ ├── logo.png │ ├── logo_without_text.png │ └── styles.css ├── docker-compose.yml ├── index.html ├── package.json ├── server ├── controllers │ ├── api-controller.js │ ├── api-functions.js │ ├── cloud-auth-controller.js │ ├── metric-controller.js │ └── user-controller.js ├── credentials.js.example ├── encryption.js.example ├── models │ ├── cloud-cluster-model.js │ ├── metric-model.js │ └── user-model.js ├── routes │ └── user-router.js └── server.js ├── tailwind.config.js └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaCompass/e0ce76c20a99c4de2d342a8df839773f070ece2a/.DS_Store -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | SUPER_SECRET = your_secret -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | dist/* 4 | .env 5 | encryption.js 6 | credentials.js 7 | api-functions.js -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": false 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true 4 | } 5 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:16.17 2 | 3 | WORKDIR /usr/src/app 4 | 5 | COPY . . 6 | 7 | RUN npm install 8 | 9 | RUN npm run build 10 | 11 | CMD ["npm", "start"] 12 | 13 | EXPOSE 3000 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # KafkaCompass 2 | 3 |

4 | logo 5 |

6 | 7 | Welcome to **KafkaCompass Alpha**, a GUI specialized in monitoring your Confluent Cloud Kafka clusters. Get performance and content statistics, view messages in your topics, and check your cluster's history snapshots to see how you cluster's performance changed over time. We're excited to have you as a user, and we can't wait to help you navigate and optimize your Kafka clusters! 8 | 9 | Our web application will be up and running soon, for now, get started and run KafkaCompass locally. 10 | 11 | # Guide 12 | 13 | ## Getting Started 🧭 14 | 15 | - To get started with KafkaCompass, clone this repo to your local machine. Once completed, you will need to add some additional files to your project directory. These steps will help you create your own database and encryption functions so you can take advantage of all of KafkaCompass's backend functionality. 16 | 17 |

18 | screenshot

19 | 20 | ### Configuring Your Repository 21 | 22 | - **credentials.js** 23 | 24 | - Under the "server" directory, create a new file called "credentials.js." This file will allow you to connect your NoSQL database (we recommend using MongoDB). If you are not sure how to set up a database on MongoDB, check out their [guide](https://www.mongodb.com/basics/create-database). 25 | - Following the format on "credentials.js.example," copy and paste the link to your database URI. KafkaCompass is now connected to your database! 26 | 27 | - **encryption.js** 28 | 29 | - In order to encrypt and decrypt information from your database, you will need to set up functionality to do so. Using the template on "encryption.js.example," create your own "encryption.js" file. 30 | - For the security of our own application as well as yours, you will need to implement your own encryption and decryption functions. If you are not sure where to start with this, we recommend looking at some algorithms [here](https://www.labnol.org/code/encrypt-decrypt-javascript-200307). 31 | 32 | ### Running the application 33 | 34 | - Once credentials.js and encryption.js are set up, your application is now good to go! Install all dependencies with "npm install," then use "npm run dev" to run in development mode. Alternatively, use "npm run build" then "npm start" to run in production mode. 35 | 36 | ## Sign Up and Adding Clusters 37 | 38 | - Once installed, make sure you sign up on the landing page, which will appear on the initial loading of the application. Click the "Sign Up" button at the top right of the navbar, fill out the designated fields, and click 'Sign Up' 39 | - Once you’ve signed up, you will be greeted by your dashboard. It’s important to note that KafkaCompass is designed to work with Confluent Cloud Apache Kafka clusters, so to get started viewing Cluster performance statistics and content, you will need to have a Kafka cluster already running in Confluent Cloud. Follow the steps [here](https://docs.confluent.io/cloud/current/get-started/index.html#quick-start-for-ccloud) to set this up. 40 | - Once you have a running cluster, you can now link it to the application. To link your cluster, click on the “Add Cluster” button in the nav-bar at the top of the dashboard. Fill out all the fields, checking carefully for accuracy, and press submit. Your cluster information will now be stored and encrypted in your user profile for use in the app. 41 | - Having trouble finding some of your cluster information? Here is where each piece of info can be found: 42 | - **Cluster name**: Up to you! Create an alias to help you remember this specific cluster. 43 | - **API Key** and **API Secret**: On Confluent Cloud, navigate to your cluster. In the sidebar on the left, click on "API Keys," located under Cluster Overview. If you don't already have an API Key, generate a new one, making sure to securely save your key and secret - the secret will no longer be viewable after creation. 44 | - **Cloud Key** and **Cloud Secret**: In the top navbar of Confluent Cloud, click the three stacked lines on the right corner. This will open a menu, where you can click "Cloud API keys." Similar to the previous step, if you have not already generated a Cloud Key, create a new one and securely save the key and secret. 45 | - **REST Endpoint**, **Cluster ID**, and **Bootstrap Server**: Return to your cluster's page on Confluent Cloud. In the sidebar on the left, click "Cluster Settings" under "Cluster Overview." The information will be displayed in the boxes for "Identification" and "Endpoints." 46 | 47 | ## View Modes 48 | 49 | Now that you have a cluster stored in your account, you will be able to see performance and content information for the cluster. KafkaCompass has two primary viewing modes: **Performance Statistics** and **Content Monitoring**. Additionally, users have access to their **Cluster History**. 50 | 51 |

52 | screenshot 53 |

54 | 55 | ### Performance Statistics 56 | 57 | - The default mode is Performance Statistics, which initially shows a chart displaying retained bytes per topic in the first cluster of your profile. To switch charts, press the **Select Metrics** button in the nav-bar, which will open a side menu. In the side menu, you can choose the desired statistic you would like to view. If you would like to update these metrics to the most recent state of your cluster, simply press the **Update Cluster** button on the dashboard. 58 | 59 |

60 | screenshot 61 |

62 | 63 | - Once you have multiple clusters added to your profile, you can switch between these clusters by using the **Switch Cluster** button on the dashboard. Simply click on the desired cluster in the dropdown menu, and all statistics will be refreshed for this selected cluster. 64 | 65 | ### Content Monitoring 66 | 67 | - In Content Monitoring, you can consume and see the current messages in your selected cluster. To view messages, select the desired topic in your cluster via the dropdown menu, located to the left of the chart. Once you have selected a topic, simply click **Consume Messages**, and the most recent messages in the given topic of your cluster will be displayed. 68 | 69 |

70 | screenshot 71 |

72 | 73 | - Additionally, you can change the configuration of your cluster. To add and delete topics, or to add a message to a given topic, simply click on each action’s button, located on the right-hand side of the screen, and fill out their respective forms. In Content Monitoring, you will be able to see these changes nearly instantly. However, it’s worth noting that in “Performance Statistics” mode, it may take around 3-5 minutes for the addition or deletion of topics to show up, due to how Confluent Cloud updates cluster statistics. 74 | - Once you have multiple clusters added to your profile, you can switch between these clusters by using the **Switch Cluster** button, located in the menu at the top-left of the navbar. After clicking on "Switch Cluster, click on the desired cluster in the dropdown menu, and you will now be able to interact with that chosen cluster 75 | 76 | # Contributing to KafkaCompass 77 | 78 | - KafkaCompass is open source, and we would love to see contributions from the community! If you would like to contribute, submit a pull request to the "dev" branch of the original repository. Additionally, if you notice any issues with the application, please add an entry to the "issues" section of the repository. 79 | 80 | If you are looking for specific ideas on where to contribute, here are some features we would like to see being added/worked on: 81 | 82 | - Visual cluster comparison features 83 | - Additional performance metrics 84 | - Tests for front and backend functionality 85 | 86 | ## Meet the team 💻 87 | 88 | 95 | -------------------------------------------------------------------------------- /client/NavbarContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const NavbarContext = createContext(null); 4 | -------------------------------------------------------------------------------- /client/app.jsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo, useState, useEffect } from "react"; 2 | import { Route, Routes, useNavigate, Navigate } from "react-router-dom"; 3 | import { NavbarContext } from "./NavbarContext"; 4 | import DashboardContainer from "./containers/dashboard-container"; 5 | import LandingPage from "./containers/landing-page-container"; 6 | import NotFound from "./containers/NotFound"; 7 | import Navbar from "./components/nav-bar"; 8 | import Auth from "./containers/auth"; 9 | import Footer from "./components/footer"; 10 | import "./static/styles.css"; 11 | 12 | function App() { 13 | // using useNavigate hook to navigate between routes 14 | const navigate = useNavigate(); 15 | 16 | // navigation bar and mode-related state 17 | const [renderDrawerButton, setRenderDrawerButton] = useState(false); 18 | const [sideBarMode, setSideBarMode] = useState("current"); 19 | const [dashboardMode, setDashboardMode] = useState("performanceStatistics"); 20 | 21 | // user-related state: 22 | // user data from the backend 23 | // variable to check if user is logged in 24 | // if user is not logged in, what authentification form we need to render 25 | const [user, setUser] = useState({}); 26 | const [loggedIn, setLoggedIn] = useState(false); 27 | const [authMode, setAuthMode] = useState(""); 28 | 29 | // metric-related state (for loading data for cluster) 30 | const [metricIndex, setMetricIndex] = useState(-1); 31 | // holder for data -> metric is the part of user state to force the re-render when user updates metrics 32 | const [metric, setMetric] = useState({}); 33 | const [metricUpdated, setMetricUpdated] = useState(false); 34 | 35 | // shared navigation bar state 36 | const providerValue = { 37 | drawerButtonsState: useMemo( 38 | () => ({ renderDrawerButton, setRenderDrawerButton }), 39 | [renderDrawerButton, setRenderDrawerButton] 40 | ), 41 | loggedState: useMemo( 42 | () => ({ loggedIn, setLoggedIn }), 43 | [loggedIn, setLoggedIn] 44 | ), 45 | authModeState: useMemo( 46 | () => ({ authMode, setAuthMode }), 47 | [authMode, setAuthMode] 48 | ), 49 | userState: { user, setUser }, 50 | dashboardState: useMemo( 51 | () => ({ dashboardMode, setDashboardMode }), 52 | [dashboardMode, setDashboardMode] 53 | ), 54 | sideBarState: useMemo( 55 | () => ({ sideBarMode, setSideBarMode }), 56 | [sideBarMode, setSideBarMode] 57 | ), 58 | metricState: { metric, setMetric }, 59 | metricIndexState: { metricIndex, setMetricIndex }, 60 | metricUpdatedState: { metricUpdated, setMetricUpdated } 61 | }; 62 | 63 | const checkSession = async () => { 64 | try { 65 | const response = await fetch("/api/authenticate"); 66 | if (response.ok) { 67 | const session = await response.json(); 68 | if (session.auth) { 69 | setLoggedIn(true); 70 | setUser(session.user); 71 | } else { 72 | setLoggedIn(false); 73 | setUser({}); 74 | } 75 | } else { 76 | setLoggedIn(false); 77 | setUser({}); 78 | } 79 | } catch (err) { 80 | // If try-catch block fails Network error occurred 81 | } 82 | }; 83 | 84 | const logUserOut = async () => { 85 | try { 86 | const response = await fetch("/api/logout"); 87 | if (response.ok) { 88 | setUser({}); 89 | setLoggedIn(false); 90 | } 91 | } catch (err) { 92 | console.log( 93 | "Network error in attempting to logout - user not logged out" 94 | ); 95 | } 96 | }; 97 | 98 | // if data on cluster was updated, useEffect updates user state with new metrics 99 | useEffect(() => { 100 | if (metric.created_at) { 101 | user.metric.push(metric); 102 | setUser(user); 103 | setMetricUpdated(!metricUpdated); 104 | } 105 | }, [metric]); 106 | 107 | // if user gets updated, set metric's index to -1 (we switch user to the current cluster) 108 | useEffect(() => { 109 | setMetricIndex(-1); 110 | }, [user]); 111 | 112 | useEffect(() => { 113 | checkSession(); 114 | }, []); 115 | 116 | return ( 117 | 118 |
119 | 120 | } /> 121 | 127 | 128 | 129 | 130 | ) : ( 131 | 132 | ) 133 | } 134 | /> 135 | } /> 136 | } /> 137 | 138 |
139 |