20 |
21 | ## Features
22 |
23 | | Feature | Status |
24 | | -------------------------------------------------------------------------------------------------------- | ------ |
25 | | Login authorization using JWT tokens | ✅ |
26 | | Prometheus API | ✅ |
27 | | Build in functionality to have users simply input kafka cluster URIs and link up metrics on the backend | ⏳ |
28 | | Allow users to choose from list of metrics they would like to see or even input metrics they want to see | ⏳ |
29 | | Switch between Kafka clusters | ⏳ |
30 | | Dark Mode | ⏳ |
31 | | More styling using Tailwind | 🙏🏻 |
32 | | Save in database location of kafka clusters and prometheus address | 🙏🏻 |
33 |
34 | - ✅ = Ready to use
35 | - ⏳ = In progress
36 | - 🙏🏻 = Looking for contributors
37 |
38 | ## Setup
39 |
40 | ### To setup JMX exporter
41 |
42 | - Build exporter:
43 |
44 | ```shell
45 | git clone https://github.com/prometheus/jmx_exporter.git
46 | cd jmx_exporter
47 | mvn package
48 | ```
49 |
50 | - Start zookeeper:
51 |
52 | ```shell
53 | /usr/local/opt/kafka/bin/zookeeper-server-start /usr/local/etc/zookeeper/zoo.cfg
54 | ```
55 |
56 | - Setup JMX exporter to run on Kafka (run from root) \
57 |
58 | ```shell
59 | export EXTRA_ARGS="-Dcom.sun.management.jmxremote \
60 | -Dcom.sun.management.jmxremote.authenticate=false \
61 | -Dcom.sun.management.jmxremote.ssl=false \
62 | -Djava.util.logging.config.file=logging.properties \
63 | -javaagent:/Users/Dominic Kenny - 100 | Github 101 | | 102 | LinkedIn 103 | 104 |
105 |Connor Donahue - 106 | Github 107 | | 108 | LinkedIn 109 | 110 |
111 |Wilson Wu - 112 | Github 113 | | 114 | LinkedIn 115 | 116 |
117 |David Tezza - 118 | Github 119 | | 120 | LinkedIn 121 | 122 |
123 | 124 | ## License 125 | 126 | [MIT License](./LICENSE.md) 127 | -------------------------------------------------------------------------------- /__tests__/server/server.test.js: -------------------------------------------------------------------------------- 1 | import request from 'supertest'; 2 | 3 | import app from '../../server/server.js'; 4 | const server = 'http://localhost:3030'; 5 | 6 | describe('Route Integration', () => { 7 | describe('/404Route', () => { 8 | test('respond with 404 status and text/html content type', () => { 9 | return request(server) 10 | .get('/fakeroute') 11 | .expect('Content-Type', /text\/html/) 12 | .expect(404); 13 | }); 14 | }); 15 | 16 | describe('/user', () => { 17 | describe('/user/login', () => { 18 | test('respond with 400 status for missing password to /login', () => { 19 | return request(server) 20 | .post('/user/login') 21 | .send({ username: 'KlusterFunk' }) 22 | .expect('Content-Type', /json/) 23 | .expect(400, { err: 'Username and password required' }); 24 | }); 25 | test('respond with 400 status for missing username to /login', () => { 26 | return request(server) 27 | .post('/user/login') 28 | .send({ password: 'KlusterFunk' }) 29 | .expect('Content-Type', /json/) 30 | .expect(400, { err: 'Username and password required' }); 31 | }); 32 | }); 33 | 34 | describe('/user/signup', () => { 35 | test('respond with 400 status for missing password to /signup', () => { 36 | return request(server) 37 | .post('/user/signup') 38 | .send({ username: 'KlusterFunk' }) 39 | .expect('Content-Type', /json/) 40 | .expect(400, { err: 'Username and password required' }); 41 | }); 42 | test('respond with 400 status for missing username to /signup', () => { 43 | return request(server) 44 | .post('/user/signup') 45 | .send({ password: 'KlusterFunk' }) 46 | .expect('Content-Type', /json/) 47 | .expect(400, { err: 'Username and password required' }); 48 | }); 49 | }); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /__tests__/setup.js: -------------------------------------------------------------------------------- 1 | import { afterEach } from 'vitest'; 2 | import { cleanup } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/vitest'; 4 | 5 | // runs a cleanup after each test case (e.g. clearing jsdom) 6 | afterEach(() => { 7 | cleanup(); 8 | }); 9 | -------------------------------------------------------------------------------- /__tests__/src/App.test.jsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import { BrowserRouter, MemoryRouter } from 'react-router-dom'; 3 | 4 | import App from '/Users/Donahue/Documents/gits/ClusterFunk/src/App.jsx'; 5 | import 'react-router-dom'; 6 | 7 | describe('App', () => { 8 | test('renders App', () => { 9 | render( 10 |
24 |
30 | Hello, {user}!
31 |
32 | navigate('/dashboard')}>
33 | Dashboard
34 |
35 | toggleDarkMode()}>
36 | {darkMode ? 'Light Mode' : 'Dark Mode'}
37 |
38 | signout()}>Sign out
40 |
41 |
43 | )}
44 |
78 | Prometheus: {promAddress}
79 |
80 | )}
81 |
6 |
12 |
25 |
26 | );
27 | };
28 |
29 | export default ReadMe;
30 |
--------------------------------------------------------------------------------
/src/component/TeamInfo.jsx:
--------------------------------------------------------------------------------
1 | const TeamInfo = (props) => {
2 | const { member, pic, githubLink, linkedinLink, githubIcon, linkedinIcon } =
3 | props;
4 |
5 | return (
6 |
18 | );
19 | };
20 |
21 | export default TeamInfo;
22 |
--------------------------------------------------------------------------------
/src/containers/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import LineGraph from '../component/LineGraph.jsx';
3 | import PromAddress from '../component/PromAddress.jsx';
4 | import Nav from '../component/Navbar.jsx';
5 | import useMetricStore from '../Hooks/useMetricStore.jsx';
6 | import useAuthenticate from '../Hooks/useAuthenticate.jsx';
7 |
8 |
9 | const Dashboard = () => {
10 | const [ user, setUser ] = useState('');
11 |
12 | // created custom hook to modularize user authentication actions such as verifying user session and signout
13 | const [ signout ] = useAuthenticate(setUser);
14 | const [ promAddress, setPromAddress ] = useState(null);
15 |
16 | // created custom hook to modularize the current state of graphs so that the dashboard looks cleaner and metric state hook can be reuseable
17 | const [ metricStore, resetMetricStore ] = useMetricStore(promAddress);
18 |
19 | // pushing graph components into an array so it is easy to add more metrics
20 | const graphArray = [];
21 | for (let i in metricStore) {
22 | if (i === 'brokerCount') continue;
23 | graphArray.push(
24 | 7 | KlusterFunk is a monitoring tool, built to visualize metrics from local 8 | kafka clusters, showing you a real-time, live-updating graph of those 9 | metrics. 10 |
11 |
13 | Features:
14 | 
23 |
24 | -
15 |
- Sign in/sign up for individual user accounts 16 |
- Visualizes Metrics pulled from user’s Prometheus 17 |
- Interactive, live-updating graphs of data points 18 |
- Reset button to refresh graphs 19 |
- Easy to use interface and simple display 20 |
- Funky, groovy color scheme 21 |
99 |
104 | 
105 |
107 |
112 |
116 |
117 | LINKS
118 |
119 |
123 |
124 |
125 |
132 |
133 |
120 | {links}
121 |
122 |
126 | MEET THE TEAM
127 |
128 |
129 | {teamInfo}
130 |
131 |
47 |
48 |
49 |
113 | {auth === 'signup' && (
114 | setAuth('login')}>
115 | Or sign in
116 |
117 | 118 | )} 119 |
120 |
121 | );
122 | };
123 |
124 | export default Login;
125 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7 | line-height: 1.5;
8 | font-weight: 400;
9 |
10 | color-scheme: light dark;
11 | color: rgba(255, 255, 255, 0.87);
12 | background-color: #242424;
13 |
14 | font-synthesis: none;
15 | text-rendering: optimizeLegibility;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | -webkit-text-size-adjust: 100%;
19 | }
20 |
21 | a {
22 | font-weight: 500;
23 | color: #646cff;
24 | text-decoration: inherit;
25 | }
26 | a:hover {
27 | color: #535bf2;
28 | }
29 |
30 | body {
31 | margin: 0;
32 | display: flex;
33 | place-items: center;
34 | min-width: 320px;
35 | min-height: 100vh;
36 | background-color: #4a044e;
37 | }
38 |
39 | h1 {
40 | font-size: 3.2em;
41 | line-height: 1.1;
42 | }
43 |
44 | button {
45 | border-radius: 8px;
46 | border: 1px solid transparent;
47 | padding: 0.6em 1.2em;
48 | font-size: 1em;
49 | font-weight: 500;
50 | font-family: inherit;
51 | background-color: #1a1a1a;
52 | cursor: pointer;
53 | transition: border-color 0.25s;
54 | }
55 | button:hover {
56 | border-color: #646cff;
57 | }
58 | button:focus,
59 | button:focus-visible {
60 | outline: 4px auto -webkit-focus-ring-color;
61 | }
62 |
63 | @media (prefers-color-scheme: light) {
64 | :root {
65 | color: #213547;
66 | background-color: #ffffff;
67 | }
68 | a:hover {
69 | color: #747bff;
70 | }
71 | button {
72 | background-color: #f9f9f9;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import { BrowserRouter } from 'react-router-dom'
4 | import App from './App.jsx'
5 | import './index.css'
6 |
7 | ReactDOM.createRoot(document.getElementById('root')).render(
8 | 117 | 118 | )} 119 |