├── .eslintrc.json ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── __tests__ ├── testEnvLocalsInPath.test.ts └── testPackageInstallation.test.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── assets │ ├── Alston.jpeg │ ├── Felix.jpeg │ ├── LogoWithText-Blue.jpg │ ├── LogoWithText-Transparent.png │ ├── Navdeep.jpeg │ ├── Waisan.jpeg │ ├── clipboard.png │ ├── demo-vid.gif │ ├── github.svg │ ├── google.svg │ ├── jaeger-ui.png │ ├── prometheus-ui.png │ └── zipkin-ui.png ├── favicon.ico └── fonts │ └── AkkuratPro-Regular.otf ├── src ├── components │ ├── CodeSnippet.tsx │ ├── DemoGif.tsx │ ├── FeatureBlock.tsx │ ├── Features.tsx │ ├── GithubButton.tsx │ ├── HomeLayout.tsx │ ├── InputGroup.tsx │ ├── LinkedInButton.tsx │ ├── MainBanner.tsx │ ├── Navbar.tsx │ ├── ProviderButton.tsx │ ├── ReactParticles.tsx │ ├── SecondaryBanner.tsx │ ├── TeamMember.tsx │ └── Teams.tsx ├── layout │ └── layout.tsx ├── pages │ ├── _app.tsx │ ├── api │ │ └── auth │ │ │ ├── [...nextauth].js │ │ │ └── signup.js │ ├── home.tsx │ ├── index.tsx │ ├── login.tsx │ ├── register.tsx │ └── styles │ │ └── tailwind.css └── server │ ├── database │ └── conn.tsx │ ├── lib │ └── validate.tsx │ └── model │ └── Schema.tsx ├── tailwind.config.js ├── test.config.json └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # next.js 10 | /.next/ 11 | /out/ 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # local env files 26 | .env*.local 27 | 28 | # vercel 29 | .vercel 30 | 31 | # typescript 32 | *.tsbuildinfo 33 | next-env.d.ts 34 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18.15 2 | 3 | WORKDIR /usr/app/ 4 | COPY . /usr/app/ 5 | 6 | RUN npm install 7 | RUN npm run build 8 | EXPOSE 3000 9 | ENTRYPOINT npm run start -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Eclipse Public License - v 2.0 2 | 3 | THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE 4 | PUBLIC LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION 5 | OF THE PROGRAM CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT. 6 | 7 | 1. DEFINITIONS 8 | 9 | "Contribution" means: 10 | 11 | a) in the case of the initial Contributor, the initial content 12 | Distributed under this Agreement, and 13 | 14 | b) in the case of each subsequent Contributor: 15 | i) changes to the Program, and 16 | ii) additions to the Program; 17 | where such changes and/or additions to the Program originate from 18 | and are Distributed by that particular Contributor. A Contribution 19 | "originates" from a Contributor if it was added to the Program by 20 | such Contributor itself or anyone acting on such Contributor's behalf. 21 | Contributions do not include changes or additions to the Program that 22 | are not Modified Works. 23 | 24 | "Contributor" means any person or entity that Distributes the Program. 25 | 26 | "Licensed Patents" mean patent claims licensable by a Contributor which 27 | are necessarily infringed by the use or sale of its Contribution alone 28 | or when combined with the Program. 29 | 30 | "Program" means the Contributions Distributed in accordance with this 31 | Agreement. 32 | 33 | "Recipient" means anyone who receives the Program under this Agreement 34 | or any Secondary License (as applicable), including Contributors. 35 | 36 | "Derivative Works" shall mean any work, whether in Source Code or other 37 | form, that is based on (or derived from) the Program and for which the 38 | editorial revisions, annotations, elaborations, or other modifications 39 | represent, as a whole, an original work of authorship. 40 | 41 | "Modified Works" shall mean any work in Source Code or other form that 42 | results from an addition to, deletion from, or modification of the 43 | contents of the Program, including, for purposes of clarity any new file 44 | in Source Code form that contains any contents of the Program. Modified 45 | Works shall not include works that contain only declarations, 46 | interfaces, types, classes, structures, or files of the Program solely 47 | in each case in order to link to, bind by name, or subclass the Program 48 | or Modified Works thereof. 49 | 50 | "Distribute" means the acts of a) distributing or b) making available 51 | in any manner that enables the transfer of a copy. 52 | 53 | "Source Code" means the form of a Program preferred for making 54 | modifications, including but not limited to software source code, 55 | documentation source, and configuration files. 56 | 57 | "Secondary License" means either the GNU General Public License, 58 | Version 2.0, or any later versions of that license, including any 59 | exceptions or additional permissions as identified by the initial 60 | Contributor. 61 | 62 | 2. GRANT OF RIGHTS 63 | 64 | a) Subject to the terms of this Agreement, each Contributor hereby 65 | grants Recipient a non-exclusive, worldwide, royalty-free copyright 66 | license to reproduce, prepare Derivative Works of, publicly display, 67 | publicly perform, Distribute and sublicense the Contribution of such 68 | Contributor, if any, and such Derivative Works. 69 | 70 | b) Subject to the terms of this Agreement, each Contributor hereby 71 | grants Recipient a non-exclusive, worldwide, royalty-free patent 72 | license under Licensed Patents to make, use, sell, offer to sell, 73 | import and otherwise transfer the Contribution of such Contributor, 74 | if any, in Source Code or other form. This patent license shall 75 | apply to the combination of the Contribution and the Program if, at 76 | the time the Contribution is added by the Contributor, such addition 77 | of the Contribution causes such combination to be covered by the 78 | Licensed Patents. The patent license shall not apply to any other 79 | combinations which include the Contribution. No hardware per se is 80 | licensed hereunder. 81 | 82 | c) Recipient understands that although each Contributor grants the 83 | licenses to its Contributions set forth herein, no assurances are 84 | provided by any Contributor that the Program does not infringe the 85 | patent or other intellectual property rights of any other entity. 86 | Each Contributor disclaims any liability to Recipient for claims 87 | brought by any other entity based on infringement of intellectual 88 | property rights or otherwise. As a condition to exercising the 89 | rights and licenses granted hereunder, each Recipient hereby 90 | assumes sole responsibility to secure any other intellectual 91 | property rights needed, if any. For example, if a third party 92 | patent license is required to allow Recipient to Distribute the 93 | Program, it is Recipient's responsibility to acquire that license 94 | before distributing the Program. 95 | 96 | d) Each Contributor represents that to its knowledge it has 97 | sufficient copyright rights in its Contribution, if any, to grant 98 | the copyright license set forth in this Agreement. 99 | 100 | e) Notwithstanding the terms of any Secondary License, no 101 | Contributor makes additional grants to any Recipient (other than 102 | those set forth in this Agreement) as a result of such Recipient's 103 | receipt of the Program under the terms of a Secondary License 104 | (if permitted under the terms of Section 3). 105 | 106 | 3. REQUIREMENTS 107 | 108 | 3.1 If a Contributor Distributes the Program in any form, then: 109 | 110 | a) the Program must also be made available as Source Code, in 111 | accordance with section 3.2, and the Contributor must accompany 112 | the Program with a statement that the Source Code for the Program 113 | is available under this Agreement, and informs Recipients how to 114 | obtain it in a reasonable manner on or through a medium customarily 115 | used for software exchange; and 116 | 117 | b) the Contributor may Distribute the Program under a license 118 | different than this Agreement, provided that such license: 119 | i) effectively disclaims on behalf of all other Contributors all 120 | warranties and conditions, express and implied, including 121 | warranties or conditions of title and non-infringement, and 122 | implied warranties or conditions of merchantability and fitness 123 | for a particular purpose; 124 | 125 | ii) effectively excludes on behalf of all other Contributors all 126 | liability for damages, including direct, indirect, special, 127 | incidental and consequential damages, such as lost profits; 128 | 129 | iii) does not attempt to limit or alter the recipients' rights 130 | in the Source Code under section 3.2; and 131 | 132 | iv) requires any subsequent distribution of the Program by any 133 | party to be under a license that satisfies the requirements 134 | of this section 3. 135 | 136 | 3.2 When the Program is Distributed as Source Code: 137 | 138 | a) it must be made available under this Agreement, or if the 139 | Program (i) is combined with other material in a separate file or 140 | files made available under a Secondary License, and (ii) the initial 141 | Contributor attached to the Source Code the notice described in 142 | Exhibit A of this Agreement, then the Program may be made available 143 | under the terms of such Secondary Licenses, and 144 | 145 | b) a copy of this Agreement must be included with each copy of 146 | the Program. 147 | 148 | 3.3 Contributors may not remove or alter any copyright, patent, 149 | trademark, attribution notices, disclaimers of warranty, or limitations 150 | of liability ("notices") contained within the Program from any copy of 151 | the Program which they Distribute, provided that Contributors may add 152 | their own appropriate notices. 153 | 154 | 4. COMMERCIAL DISTRIBUTION 155 | 156 | Commercial distributors of software may accept certain responsibilities 157 | with respect to end users, business partners and the like. While this 158 | license is intended to facilitate the commercial use of the Program, 159 | the Contributor who includes the Program in a commercial product 160 | offering should do so in a manner which does not create potential 161 | liability for other Contributors. Therefore, if a Contributor includes 162 | the Program in a commercial product offering, such Contributor 163 | ("Commercial Contributor") hereby agrees to defend and indemnify every 164 | other Contributor ("Indemnified Contributor") against any losses, 165 | damages and costs (collectively "Losses") arising from claims, lawsuits 166 | and other legal actions brought by a third party against the Indemnified 167 | Contributor to the extent caused by the acts or omissions of such 168 | Commercial Contributor in connection with its distribution of the Program 169 | in a commercial product offering. The obligations in this section do not 170 | apply to any claims or Losses relating to any actual or alleged 171 | intellectual property infringement. In order to qualify, an Indemnified 172 | Contributor must: a) promptly notify the Commercial Contributor in 173 | writing of such claim, and b) allow the Commercial Contributor to control, 174 | and cooperate with the Commercial Contributor in, the defense and any 175 | related settlement negotiations. The Indemnified Contributor may 176 | participate in any such claim at its own expense. 177 | 178 | For example, a Contributor might include the Program in a commercial 179 | product offering, Product X. That Contributor is then a Commercial 180 | Contributor. If that Commercial Contributor then makes performance 181 | claims, or offers warranties related to Product X, those performance 182 | claims and warranties are such Commercial Contributor's responsibility 183 | alone. Under this section, the Commercial Contributor would have to 184 | defend claims against the other Contributors related to those performance 185 | claims and warranties, and if a court requires any other Contributor to 186 | pay any damages as a result, the Commercial Contributor must pay 187 | those damages. 188 | 189 | 5. NO WARRANTY 190 | 191 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, AND TO THE EXTENT 192 | PERMITTED BY APPLICABLE LAW, THE PROGRAM IS PROVIDED ON AN "AS IS" 193 | BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR 194 | IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF 195 | TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR 196 | PURPOSE. Each Recipient is solely responsible for determining the 197 | appropriateness of using and distributing the Program and assumes all 198 | risks associated with its exercise of rights under this Agreement, 199 | including but not limited to the risks and costs of program errors, 200 | compliance with applicable laws, damage to or loss of data, programs 201 | or equipment, and unavailability or interruption of operations. 202 | 203 | 6. DISCLAIMER OF LIABILITY 204 | 205 | EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, AND TO THE EXTENT 206 | PERMITTED BY APPLICABLE LAW, NEITHER RECIPIENT NOR ANY CONTRIBUTORS 207 | SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 208 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST 209 | PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 210 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 211 | ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE 212 | EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE 213 | POSSIBILITY OF SUCH DAMAGES. 214 | 215 | 7. GENERAL 216 | 217 | If any provision of this Agreement is invalid or unenforceable under 218 | applicable law, it shall not affect the validity or enforceability of 219 | the remainder of the terms of this Agreement, and without further 220 | action by the parties hereto, such provision shall be reformed to the 221 | minimum extent necessary to make such provision valid and enforceable. 222 | 223 | If Recipient institutes patent litigation against any entity 224 | (including a cross-claim or counterclaim in a lawsuit) alleging that the 225 | Program itself (excluding combinations of the Program with other software 226 | or hardware) infringes such Recipient's patent(s), then such Recipient's 227 | rights granted under Section 2(b) shall terminate as of the date such 228 | litigation is filed. 229 | 230 | All Recipient's rights under this Agreement shall terminate if it 231 | fails to comply with any of the material terms or conditions of this 232 | Agreement and does not cure such failure in a reasonable period of 233 | time after becoming aware of such noncompliance. If all Recipient's 234 | rights under this Agreement terminate, Recipient agrees to cease use 235 | and distribution of the Program as soon as reasonably practicable. 236 | However, Recipient's obligations under this Agreement and any licenses 237 | granted by Recipient relating to the Program shall continue and survive. 238 | 239 | Everyone is permitted to copy and distribute copies of this Agreement, 240 | but in order to avoid inconsistency the Agreement is copyrighted and 241 | may only be modified in the following manner. The Agreement Steward 242 | reserves the right to publish new versions (including revisions) of 243 | this Agreement from time to time. No one other than the Agreement 244 | Steward has the right to modify this Agreement. The Eclipse Foundation 245 | is the initial Agreement Steward. The Eclipse Foundation may assign the 246 | responsibility to serve as the Agreement Steward to a suitable separate 247 | entity. Each new version of the Agreement will be given a distinguishing 248 | version number. The Program (including Contributions) may always be 249 | Distributed subject to the version of the Agreement under which it was 250 | received. In addition, after a new version of the Agreement is published, 251 | Contributor may elect to Distribute the Program (including its 252 | Contributions) under the new version. 253 | 254 | Except as expressly stated in Sections 2(a) and 2(b) above, Recipient 255 | receives no rights or licenses to the intellectual property of any 256 | Contributor under this Agreement, whether expressly, by implication, 257 | estoppel or otherwise. All rights in the Program not expressly granted 258 | under this Agreement are reserved. Nothing in this Agreement is intended 259 | to be enforceable by any entity that is not a Contributor or Recipient. 260 | No third-party beneficiary rights are created under this Agreement. 261 | 262 | Exhibit A - Form of Secondary Licenses Notice 263 | 264 | "This Source Code may also be made available under the following 265 | Secondary Licenses when the conditions for such availability set forth 266 | in the Eclipse Public License, v. 2.0 are satisfied: {name license(s), 267 | version(s), and exceptions or additional permissions here}." 268 | 269 | Simply including a copy of this Agreement, including this Exhibit A 270 | is not sufficient to license the Source Code under Secondary Licenses. 271 | 272 | If it is not possible or desirable to put the notice in a particular 273 | file, then You may include the notice in a location (such as a LICENSE 274 | file in a relevant directory) where a recipient would be likely to 275 | look for such a notice. 276 | 277 | You may add additional accurate notices of copyright ownership. 278 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # KafkaTrace 2 |
3 | image 4 |
5 | 6 | ## Table of Contents 7 | - [About Kafka Trace](#about-kafka-trace) 8 | - [Tech Stacks](#tech-stacks) 9 | - [Features](#features) 10 | - [User Guide](#user-guide) 11 | - [Authors](#authors) 12 | - [License](#license) 13 | 14 | ## About KafkaTrace 15 | Based on OpenTelemetry's standards, KafkaTrace streamlines the process of visualizing your Apache Kafka Clients by packaging together the necessary instrumentation files with popular open source monitoring UIs (Jaeger, Zipkin, and Prometheus). This documentation describes how to implement KafkaTrace. 16 | 17 | ## Tech Stacks 18 |
19 | 20 | [![Typescript][TS.js]][TS-url][![JavaScript][JavaScript]][JavaScript-url][![React][React.js]][React-url][![Prometheus][Prometheus]][Prometheus-url][![Zipkin][Zipkin]][Zipkin-url][![Jaeger][Jaeger]][Jaeger-url][![OpenTelemetry][OpenTelemetry]][OpenTelemetry-url][![Jest][Jest]][Jest-url][![][Git]][Git-url][![Tailwind][Tailwind]][Tailwind-url][![DaisyUI][DaisyUI]][DaisyUI-url][![NextJS][NextJs]](NextJS-url)[![NextAuth][NextAuth]][NextAuth-url][![KafkaJS][KafkaJS]][KafkaJS-url][![Docker][Docker]][Docker-url][![AWS][AWS]][AWS-url] 21 | 22 |
23 | 24 | ## Features 25 | - Intuitive all-in-one documentation to implement distributive tracing for Kafka. 26 | - Authentication for Google and GitHub OAuth. 27 | 28 | ## User Guide 29 | #### Prerequisites: 30 | You must have Docker Desktop installed and running! 31 |

32 | 33 | **IMPORTANT REMINDER**: Make sure the Kafka Cluster you want to trace has a working producer and consumer client. 34 | 35 | - **STEP 1**: Install npm package 36 | ```bash 37 | npm install kafkatrace 38 | ``` 39 | - **STEP 2**: Build and run the preconfigured containers 40 | ```typescript 41 | import { composer } from 'kafkatrace'; 42 | composer(); 43 | ``` 44 | - **STEP 3**: Add to each service file and replace [Service Name] as required 45 | ```typescript 46 | import { tracer } from 'kafkatrace'; 47 | tracer('[Service Name]'); 48 | ``` 49 | - **STEP 4**: Navigate to localhost port: 16686 for Jaeger, 9411 for Zipkin, 9090 for Prometheus or simply login to the website 50 | 51 | **Below is a demo:** 52 | 53 | ![demo-vid](https://github.com/oslabs-beta/KafkaTrace/assets/101201710/38c7a951-f58d-43a2-98fd-e7a348f83d94) 54 | 55 | For an in-depth look at KafkaTrace and all its features, www.kafkatrace.com or the [Medium Article](https://medium.com/@kafkatrace/kafka-trace-9eba2ac16eae) 56 | 57 | ## Authors 58 | | Developed By | Github | LinkedIn | 59 | | :----------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | 60 | | Felix Chen | [![Github](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/flexzchen) | [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/felixzchen/) | 61 | | Navdeep Simmack | [![Github](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/NaviSimmak) | [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Navdeep-Simmak) | 62 | | Wai San Gu | [![Github](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/waisangu) | [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/waisangu/) | 63 | | Alston Nguyen | [![Github](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/alstonnguyen) | [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/alston-s-nguyen/) | 64 | 65 | 66 | ## License 67 | Distributed under MIT License. See `LICENSE.txt` for more information. 68 | 69 | [React.js]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB 70 | [React-url]: https://reactjs.org/ 71 | [TS.js]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white 72 | [TS-url]: https://www.typescriptlang.org/ 73 | [Prometheus]: https://img.shields.io/badge/Prometheus-E6522C?style=for-the-badge&logo=Prometheus&logoColor=white 74 | [Prometheus-url]: https://prometheus.io/ 75 | [Zipkin]: https://img.shields.io/badge/zipkin-%23593d88.svg?style=for-the-badge&logo=zipkin&logoColor=white 76 | [Zipkin-url]:https://zipkin.io/ 77 | [Jaeger]:https://img.shields.io/badge/Jaeger-%23F46800.svg?style=for-the-badge&logo=Jaeger&logoColor=white 78 | [Jaeger-url]:https://www.jaegertracing.io/ 79 | [OpenTelemetry]:https://img.shields.io/badge/OpenTelemetry-3d348b?style=for-the-badge&logo=opentelemetry&logoColor=white 80 | [OpenTelemetry-url]:https://opentelemetry.io/ 81 | [JavaScript]: https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E 82 | [JavaScript-url]: https://www.javascript.com/ 83 | [Jest]: https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white 84 | [Jest-url]: https://jestjs.io/ 85 | [Docker]: https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white 86 | [Docker-url]: https://www.docker.com/ 87 | [Git]: https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white 88 | [Git-url]: https://git-scm.com/ 89 | [Tailwind]: https://img.shields.io/badge/Tailwind-%231DA1F2.svg?style=for-the-badge&logo=tailwind-css&logoColor=white 90 | [Tailwind-url]: https://tailwindcss.com/ 91 | [DaisyUI]:https://img.shields.io/badge/DaisyUI-%23593d88.svg?style=for-the-badge&logo=DaisyUI&logoColor=white 92 | [DaisyUI-url]:https://daisyui.com/ 93 | [NextJS]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white 94 | [NextJS-url]: https://nextjs.org/ 95 | [Prisma]: https://img.shields.io/badge/Prisma-%233b3e44?style=for-the-badge&logo=prisma&logoColor=white 96 | [Prisma-url]: https://www.prisma.io/ 97 | [NextAuth]: https://img.shields.io/badge/NextAuth-%23F05033.svg?style=for-the-badge&logo=nextdotjs&logoColor=white 98 | [NextAuth-url]: https://next-auth.js.org/ 99 | [KafkaJS]: https://img.shields.io/badge/KafkaJS-%2316AB39.svg?style=for-the-badge&logo=kafkajs&logoColor=white 100 | [KafkaJS-url]: https://kafka.js.org/ 101 | [AWS]: https://img.shields.io/badge/AWS-%231E73BE.svg?style=for-the-badge&logo=amazon-aws&logoColor=white: 102 | [AWS-url]: https://aws.amazon.com/ 103 | -------------------------------------------------------------------------------- /__tests__/testEnvLocalsInPath.test.ts: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs'; 2 | import * as path from 'path'; 3 | 4 | describe('Check for .env.local file', () => { 5 | it('should find .env.local in parent directory', () => { 6 | const parentDirectory = path.resolve(__dirname, '..'); // Go up one level to parent directory 7 | const envLocalPath = path.join(parentDirectory, '.env.local'); 8 | 9 | // Check if the env.locals file exists 10 | const exists = fs.existsSync(envLocalPath); 11 | 12 | // Perform Jest assertion 13 | expect(exists).toBe(true); 14 | }); 15 | }); 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /__tests__/testPackageInstallation.test.ts: -------------------------------------------------------------------------------- 1 | 2 | import fs from 'fs'; 3 | import path from 'path'; 4 | 5 | //this is a jest test to test the installation of kafkatrace npm package 6 | 7 | const kafkatrace = 'kafkatrace'; 8 | describe('NPM Package Installation Test', () => { 9 | it(`should have installed ${kafkatrace} as a regular dependency`, () => { 10 | const packagePath = path.join('node_modules', kafkatrace); 11 | const packageExists = fs.existsSync(packagePath); 12 | 13 | expect(packageExists).toBe(true); 14 | }); 15 | }); -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | }; 6 | 7 | module.exports = nextConfig; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "authapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "test": "jest" 11 | 12 | }, 13 | "jest": { 14 | "preset": "ts-jest", 15 | "testMatch": [ 16 | "/__tests__/testPackageInstallation.test.ts", 17 | "/__tests__/testEnvLocalsInPath.test.ts" 18 | ] 19 | }, 20 | "dependencies": { 21 | "bcryptjs": "^2.4.3", 22 | "express": "^4.18.2", 23 | "formik": "^2.2.9", 24 | "next": "12.2.2", 25 | "next-auth": "^4.10.0", 26 | "nodemon": "^3.0.1", 27 | "prismjs": "^1.29.0", 28 | "react": "18.2.0", 29 | "react-dom": "18.2.0", 30 | "react-icons": "^4.4.0", 31 | "test": "^3.3.0", 32 | "tippy.js": "^6.3.7", 33 | "ts-node": "^10.9.1", 34 | "tsparticles-engine": "^2.11.1" 35 | }, 36 | "devDependencies": { 37 | "@types/express": "^4.17.17", 38 | "@types/jest": "^29.5.3", 39 | "@types/prismjs": "^1.26.0", 40 | "@types/react": "^18.2.14", 41 | "autoprefixer": "^10.4.14", 42 | "daisyui": "^3.2.1", 43 | "eslint": "8.19.0", 44 | "eslint-config-next": "12.2.2", 45 | "jest": "^29.6.1", 46 | "mongoose": "^6.11.4", 47 | "postcss": "^8.4.25", 48 | "react-particles": "^2.11.0", 49 | "tailwindcss": "^3.3.2", 50 | "ts-jest": "^29.1.1", 51 | "tsparticles-slim": "^2.11.1", 52 | "typescript": "^5.1.6" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/assets/Alston.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/Alston.jpeg -------------------------------------------------------------------------------- /public/assets/Felix.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/Felix.jpeg -------------------------------------------------------------------------------- /public/assets/LogoWithText-Blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/LogoWithText-Blue.jpg -------------------------------------------------------------------------------- /public/assets/LogoWithText-Transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/LogoWithText-Transparent.png -------------------------------------------------------------------------------- /public/assets/Navdeep.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/Navdeep.jpeg -------------------------------------------------------------------------------- /public/assets/Waisan.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/Waisan.jpeg -------------------------------------------------------------------------------- /public/assets/clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/clipboard.png -------------------------------------------------------------------------------- /public/assets/demo-vid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/demo-vid.gif -------------------------------------------------------------------------------- /public/assets/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/assets/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/jaeger-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/jaeger-ui.png -------------------------------------------------------------------------------- /public/assets/prometheus-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/prometheus-ui.png -------------------------------------------------------------------------------- /public/assets/zipkin-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/assets/zipkin-ui.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/AkkuratPro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/KafkaTrace/d6530aff0ea7201a1fe2ce92cf64d453d3d68a40/public/fonts/AkkuratPro-Regular.otf -------------------------------------------------------------------------------- /src/components/CodeSnippet.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const codeStyles: React.CSSProperties = { 4 | backgroundColor: '#1f2937', 5 | color: 'white', 6 | padding: '12px', 7 | borderRadius: '8px', 8 | overflowX: 'auto', 9 | minHeight: '75px' 10 | }; 11 | 12 | interface CodeSnippetProps { 13 | code: string 14 | } 15 | 16 | export default function CodeSnippet ({code}: CodeSnippetProps) { 17 | 18 | return ( 19 |
20 |
21 |
22 | 23 | 24 | 25 |
26 | 34 |
35 | 
36 |         {code}
37 |
38 |
39 | ) 40 | }; -------------------------------------------------------------------------------- /src/components/DemoGif.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import gif from '../../public/assets/demo-vid.gif' 3 | 4 | export default function DemoGif () { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | }; -------------------------------------------------------------------------------- /src/components/FeatureBlock.tsx: -------------------------------------------------------------------------------- 1 | interface FeatureBlockProps { 2 | icon: any; 3 | title: string; 4 | description: string; 5 | } 6 | 7 | export default function FeatureBlock ({ icon, title, description }: FeatureBlockProps) { 8 | return ( 9 |
10 |
{icon}
11 |

{title}

12 |

{description}

13 |
14 | ) 15 | } -------------------------------------------------------------------------------- /src/components/Features.tsx: -------------------------------------------------------------------------------- 1 | import FeatureBlock from "./FeatureBlock"; 2 | 3 | export default function Features () { 4 | return ( 5 |
6 | {[ 7 | { 8 | icon: '⚡', 9 | title: 'Lightweight', 10 | description: 11 | 'Quick to Install and Easy To Implement - Get Started Effortlessly', 12 | }, 13 | { 14 | icon: '📦', 15 | title: 'All-In-One', 16 | description: 'Modern Dashboards to Display Apache Kafka Client Instrumentation', 17 | }, 18 | { 19 | icon: '💻', 20 | title: 'Privately Hosted', 21 | description: 22 | 'Direct Integration With Your Local Computer for Simplicity and Security', 23 | }, 24 | ].map((feature, index) => ( 25 | 26 | ))} 27 |
28 | ) 29 | }; -------------------------------------------------------------------------------- /src/components/GithubButton.tsx: -------------------------------------------------------------------------------- 1 | interface Url { 2 | url: string; 3 | } 4 | 5 | export default function GitHubButton ({url}: Url) { 6 | return ( 7 | 12 | 16 | 17 | 18 | 19 | 20 | ) 21 | } -------------------------------------------------------------------------------- /src/components/HomeLayout.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | import Image from 'next/image'; 3 | import Link from 'next/link'; 4 | 5 | interface LayoutProps { 6 | children: ReactNode, 7 | handleSignOut: any, 8 | setShowUI: any 9 | } 10 | 11 | export default function Layout ({ children, handleSignOut, setShowUI }: LayoutProps) { 12 | return ( 13 |
14 |
15 | 16 | 17 | KafkaTrace 23 | 24 | 25 | 47 |
48 | 49 |
50 | {children} 51 |
52 |
53 | 54 | ) 55 | }; -------------------------------------------------------------------------------- /src/components/InputGroup.tsx: -------------------------------------------------------------------------------- 1 | interface InputGroupProps { 2 | type: string; 3 | name: string; 4 | placeholder: string; 5 | showError?: boolean | undefined | string; 6 | icon?: React.ReactNode; 7 | onClick?: () => void; 8 | [key: string]: any; 9 | } 10 | 11 | export default function InputGroup ({type, name, placeholder, showError, icon, onClick, ...props}: InputGroupProps) { 12 | return ( 13 |
14 | 21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /src/components/LinkedInButton.tsx: -------------------------------------------------------------------------------- 1 | interface Url { 2 | url: string; 3 | } 4 | 5 | export default function LinkedInButton ({url}: Url) { 6 | return ( 7 | 12 | 16 | 17 | 18 | 19 | 20 | ) 21 | }; -------------------------------------------------------------------------------- /src/components/MainBanner.tsx: -------------------------------------------------------------------------------- 1 | import ReactParticles from "./ReactParticles"; 2 | 3 | export default function MainBanner () { 4 | return ( 5 |
6 | <> 7 | 8 | 9 |

10 | Welcome to KafkaTrace 11 |

12 |

13 | Streamline Apache Kafka monitoring with OpenTelemetry 14 |

15 |
16 | 17 | Learn More 18 | 19 |
20 |
21 | ); 22 | }; -------------------------------------------------------------------------------- /src/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import Image from 'next/image'; 3 | 4 | export default function Navbar () { 5 | return ( 6 | 36 | ) 37 | } 38 | -------------------------------------------------------------------------------- /src/components/ProviderButton.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | 3 | interface ProviderButtonProps { 4 | onClick: () => void; 5 | iconPath: string; 6 | children: React.ReactNode; 7 | className: string; 8 | } 9 | 10 | export default function ProviderButton ({ onClick, iconPath, children, className }: ProviderButtonProps) { 11 | return ( 12 | 27 | ); 28 | }; -------------------------------------------------------------------------------- /src/components/ReactParticles.tsx: -------------------------------------------------------------------------------- 1 | import Particles from 'react-particles'; 2 | import { loadSlim } from 'tsparticles-slim'; 3 | import type { Container, Engine } from 'tsparticles-engine'; 4 | import { useCallback } from 'react'; 5 | 6 | export default function ReactParticles() { 7 | 8 | const particlesInit = useCallback(async (engine: Engine) => { 9 | await loadSlim(engine); 10 | }, []); 11 | 12 | const particlesLoaded = useCallback( 13 | async (container: Container | undefined) => { 14 | await console.log(container); 15 | }, 16 | [] 17 | ); 18 | 19 | return ( 20 | 97 | ); 98 | }; -------------------------------------------------------------------------------- /src/components/SecondaryBanner.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from 'react'; 2 | import CodeSnippet from '../components/CodeSnippet'; 3 | import DemoGif from '../components/DemoGif'; 4 | import Image from 'next/image'; 5 | 6 | const npmCode = 'npm install kafkatrace' 7 | 8 | const composerCode = `import { composer } from 'kafkatrace'; 9 | composer();` 10 | 11 | const tracerCode = `import { tracer } from 'kafkatrace'; 12 | tracer('[Service Name]');` 13 | 14 | const imageStyle: CSSProperties = { 15 | width: '100%', 16 | height: '100vh', 17 | position: 'relative', 18 | border: '1px solid #A9A9A9', 19 | borderRadius: '0.55rem' 20 | } 21 | 22 | export default function SecondaryBanner () { 23 | return ( 24 |
25 |
26 |
Get Started
27 |
28 |
29 |

1. Install npm package

30 | 31 |

2. Build and run the preconfigured containers

32 | 33 |
34 |
35 |

3. Add to each service file and replace [Service Name] as required

36 | 37 |

38 | 4. Navigate to localhost port: 16686 for Jaeger, 9411 for Zipkin, 9090 for Prometheus or simply login to the website 39 |

40 |
41 |
42 | 43 |
44 |
45 |

Demo

46 | 47 |
48 |
49 |
50 | Jaeger UI 56 |
57 |
58 |
59 | Pinpoint bottlenecks in your streaming pipelines to quickly troubleshoot issues that may arise. 60 |
61 |
62 | Obtain visibility to impacts from your Apache Kafka Producer and Consumer Clients. 63 |
64 |
65 |
66 | Jaeger UI 72 |
73 |
74 |
75 |
76 | Jaeger UI 82 |
83 |
84 |
85 | Choose from popular and established open source monitoring user interfaces. 86 |
87 |
88 | ) 89 | } -------------------------------------------------------------------------------- /src/components/TeamMember.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import GitHubButton from "./GithubButton"; 3 | import LinkedInButton from "./LinkedInButton"; 4 | 5 | interface TeamMemberProps { 6 | img: string; 7 | name: string; 8 | role: string; 9 | github: string; 10 | linkedin: string; 11 | } 12 | 13 | export default function TeamMember ({ img, name, role, github, linkedin }: TeamMemberProps) { 14 | return ( 15 |
16 |

{name}

17 |
18 | {`${name}, 24 |
25 |

{role}

26 |
27 | 28 | 29 |
30 |
31 | ) 32 | } -------------------------------------------------------------------------------- /src/components/Teams.tsx: -------------------------------------------------------------------------------- 1 | import TeamMember from "./TeamMember"; 2 | 3 | export default function Teams () { 4 | return ( 5 |
6 |

7 | Meet the team 8 |

9 |
10 |
11 | {[ 12 | { 13 | name: 'Navdeep Simmak', 14 | role: 'Software Engineer', 15 | img: '/assets/Navdeep.jpeg', 16 | github: 'https://github.com/NaviSimmak', 17 | linkedin: 'https://www.linkedin.com/in/navdeep-simmak/', 18 | }, 19 | { 20 | name: 'Wai San Gu', 21 | role: 'Software Engineer', 22 | img: '/assets/Waisan.jpeg', 23 | github: 'https://github.com/waisangu', 24 | linkedin: 'https://www.linkedin.com/in/waisangu/', 25 | }, 26 | { 27 | name: 'Felix Chen', 28 | role: 'Software Engineer', 29 | img: '/assets/Felix.jpeg', 30 | github: 'https://github.com/flexzchen', 31 | linkedin: 'https://www.linkedin.com/in/felixzchen/', 32 | }, 33 | { 34 | name: 'Alston Nguyen', 35 | role: 'Software Engineer', 36 | img: '/assets/Alston.jpeg', 37 | github: 'https://github.com/alstonnguyen', 38 | linkedin: 'https://www.linkedin.com/in/alston-s-nguyen/', 39 | }, 40 | ].map((member, index) => ( 41 | 42 | ))} 43 |
44 |
45 |
46 | 47 | ) 48 | }; -------------------------------------------------------------------------------- /src/layout/layout.tsx: -------------------------------------------------------------------------------- 1 | import { PropsWithChildren } from 'react'; 2 | import Link from 'next/link'; 3 | import Image from 'next/image'; 4 | 5 | 6 | const Layout = (props: PropsWithChildren) => { 7 | return ( 8 |
9 |
10 | 11 | 12 | KafkaTrace 18 | 19 | 20 |
21 | 22 |
23 | {props.children} 24 |
25 |
26 | ); 27 | }; 28 | 29 | export default Layout; 30 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { SessionProvider } from 'next-auth/react'; 2 | import { useEffect } from 'react'; 3 | import Head from 'next/head'; 4 | import './styles/tailwind.css'; 5 | import { AppProps } from 'next/app'; 6 | 7 | export default function MyApp({ Component, pageProps }: AppProps) { 8 | 9 | return ( 10 | 11 | 12 | KafkaTrace: Kafka Tracing Simplified 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/api/auth/[...nextauth].js: -------------------------------------------------------------------------------- 1 | import NextAuth from 'next-auth'; 2 | import GoogleProvider from 'next-auth/providers/google'; 3 | import GithubProvider from 'next-auth/providers/github'; 4 | import CredentialsProvider from 'next-auth/providers/credentials'; 5 | // import connectMongo from '../../database/conn'; 6 | import Users from '/src/server/model/Schema.tsx'; 7 | import { compare } from 'bcryptjs'; 8 | 9 | export default NextAuth({ 10 | providers: [ 11 | // Google Provider 12 | GoogleProvider({ 13 | clientId: process.env.GOOGLE_ID, 14 | clientSecret: process.env.GOOGLE_SECRET, 15 | }), 16 | GithubProvider({ 17 | clientId: process.env.GITHUB_ID, 18 | clientSecret: process.env.GITHUB_SECRET, 19 | }), 20 | CredentialsProvider({ 21 | name: 'Credentials', 22 | async authorize(credentials, req) { 23 | connectMongo().catch((error) => { 24 | error: 'Connection Failed...!'; 25 | }); 26 | 27 | // check user existance 28 | const result = await Users.findOne({ email: credentials.email }); 29 | if (!result) { 30 | throw new Error('No user Found with Email Please Sign Up...!'); 31 | } 32 | 33 | // compare() 34 | const checkPassword = await compare( 35 | credentials.password, 36 | result.password 37 | ); 38 | 39 | // incorrect password 40 | if (!checkPassword || result.email !== credentials.email) { 41 | throw new Error("Username or Password doesn't match"); 42 | } 43 | 44 | return result; 45 | }, 46 | }), 47 | ], 48 | secret: 'XH6bp/TkLvnUkQiPDEZNyHc0CV+VV5RL/n+HdVHoHN0=', 49 | session: { 50 | strategy: 'jwt', 51 | }, 52 | }); 53 | -------------------------------------------------------------------------------- /src/pages/api/auth/signup.js: -------------------------------------------------------------------------------- 1 | import connectMongo from '../../../../src/server/database/conn.tsx'; 2 | import Users from '../../../../src/server/model/Schema.tsx'; 3 | import { hash } from 'bcryptjs'; 4 | 5 | export default async function handler(req, res) { 6 | connectMongo().catch((error) => res.json({ error: 'Connection Failed...!' })); 7 | 8 | // only post method is accepted 9 | if (req.method === 'POST') { 10 | if (!req.body) 11 | return res.status(404).json({ error: "Don't have form data...!" }); 12 | const { username, email, password } = req.body; 13 | 14 | // check duplicate users 15 | const checkexisting = await Users.findOne({ email }); 16 | if (checkexisting) 17 | return res.status(422).json({ message: 'User Already Exists...!' }); 18 | 19 | // hash password 20 | Users.create( 21 | { username, email, password: await hash(password, 12) }, 22 | function (err, data) { 23 | if (err) return res.status(404).json({ err }); 24 | res.status(201).json({ status: true, user: data }); 25 | } 26 | ); 27 | } else { 28 | res 29 | .status(500) 30 | .json({ message: 'HTTP method not valid only POST Accepted' }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/pages/home.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Head from 'next/head'; 3 | import { getSession, useSession, signOut } from 'next-auth/react'; 4 | import Layout from '../components/HomeLayout'; 5 | 6 | interface SessionProps { 7 | session: any, 8 | showUI: any 9 | } 10 | 11 | interface getServerSidePropsProps { 12 | req: any 13 | } 14 | 15 | function User({ session, showUI }: SessionProps) { 16 | return ( 17 |
18 |
19 |

20 | Welcome back, {session.user.name}! 21 |

22 |
23 |
User Information
24 |

Name: {session.user.name}

25 |

Email: {session.user.email}

26 |
27 | 28 |