├── .eslintrc.js
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── __mocks__
├── fileMock.js
└── styleMock.js
├── assets
├── KuberSee-1.png
└── KuberSee-t.png
├── babel.config.js
├── client
├── Components
│ ├── App
│ │ └── App.tsx
│ ├── Dashboard
│ │ ├── Dashboard.test.jsx
│ │ ├── Dashboard.tsx
│ │ └── LogsDashboard.tsx
│ ├── Dropdown
│ │ ├── DropdownButton.tsx
│ │ └── DropdownPods.tsx
│ ├── LineGraph
│ │ └── LineGraph.tsx
│ ├── LogTable
│ │ └── LogTable.tsx
│ ├── Logout
│ │ └── Logout.tsx
│ └── NavBar
│ │ └── NavBar.tsx
├── Pages
│ ├── Home
│ │ └── HomePage.tsx
│ ├── Login
│ │ └── LoginPage.tsx
│ ├── NotFound
│ │ ├── NotFound.test.tsx
│ │ └── NotFound.tsx
│ └── Signup
│ │ └── SignupPage.tsx
├── index.js
├── styling
│ └── styles.css
└── types.ts
├── electron
└── main.ts
├── fileTransformer.js
├── index.d.ts
├── index.html
├── jest.config.js
├── kubectl
├── package.json
├── server
├── controllers
│ ├── sessionController.js
│ ├── socketController.js
│ └── userController.js
├── model
│ ├── logsModel.js
│ ├── sessionModel.js
│ └── userModels.js
├── routes
│ ├── authRoute.js
│ └── socketRoutes.js
└── server.js
├── styles.css
├── tailwind.config.js
├── target
└── npmlist.json
├── tsconfig.json
└── webpack.config.js
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | node: true,
6 | },
7 | extends: [
8 | 'plugin:react/recommended',
9 | 'plugin:@typescript-eslint/recommended',
10 | ],
11 | parser: '@typescript-eslint/parser',
12 | overrides: [
13 | {
14 | env: {
15 | node: true,
16 | },
17 | files: [
18 | '.eslintrc.{js,cjs}',
19 | ],
20 | parserOptions: {
21 | sourceType: 'script',
22 | },
23 | },
24 | ],
25 | parserOptions: {
26 | ecmaVersion: 'latest',
27 | sourceType: 'module',
28 | },
29 | plugins: [
30 | 'react',
31 | '@typescript-eslint'
32 | ],
33 | rules: {
34 | },
35 | root: true,
36 | };
37 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .DS_Store
4 | package-lock.json
5 | .vscode
6 |
7 | # Logs
8 | logs
9 | *.log
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | lerna-debug.log*
14 | .pnpm-debug.log*
15 |
16 | # Diagnostic reports (https://nodejs.org/api/report.html)
17 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
18 |
19 | # Runtime data
20 | pids
21 | *.pid
22 | *.seed
23 | *.pid.lock
24 |
25 | # Directory for instrumented libs generated by jscoverage/JSCover
26 | lib-cov
27 |
28 | # Coverage directory used by tools like istanbul
29 | coverage
30 | *.lcov
31 |
32 | # nyc test coverage
33 | .nyc_output
34 |
35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 |
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 |
41 | # node-waf configuration
42 | .lock-wscript
43 |
44 | # Compiled binary addons (https://nodejs.org/api/addons.html)
45 | build/Release
46 |
47 | # Dependency directories
48 | node_modules/
49 | jspm_packages/
50 |
51 | # Snowpack dependency directory (https://snowpack.dev/)
52 | web_modules/
53 |
54 | # TypeScript cache
55 | *.tsbuildinfo
56 |
57 | # Optional npm cache directory
58 | .npm
59 |
60 | # Optional eslint cache
61 | .eslintcache
62 |
63 | # Optional stylelint cache
64 | .stylelintcache
65 |
66 | # Microbundle cache
67 | .rpt2_cache/
68 | .rts2_cache_cjs/
69 | .rts2_cache_es/
70 | .rts2_cache_umd/
71 |
72 | # Optional REPL history
73 | .node_repl_history
74 |
75 | # Output of 'npm pack'
76 | *.tgz
77 |
78 | # Yarn Integrity file
79 | .yarn-integrity
80 |
81 | # dotenv environment variable files
82 | .env
83 | .env.development.local
84 | .env.test.local
85 | .env.production.local
86 | .env.local
87 |
88 | # parcel-bundler cache (https://parceljs.org/)
89 | .cache
90 | .parcel-cache
91 |
92 | # Next.js build output
93 | .next
94 | out
95 |
96 | # Nuxt.js build / generate output
97 | .nuxt
98 | dist
99 |
100 | # Gatsby files
101 | .cache/
102 | # Comment in the public line in if your project uses Gatsby and not Next.js
103 | # https://nextjs.org/blog/next-9-1#public-directory-support
104 | # public
105 |
106 | # vuepress build output
107 | .vuepress/dist
108 |
109 | # vuepress v2.x temp and cache directory
110 | .temp
111 | .cache
112 |
113 | # Docusaurus cache and generated files
114 | .docusaurus
115 |
116 | # Serverless directories
117 | .serverless/
118 |
119 | # FuseBox cache
120 | .fusebox/
121 |
122 | # DynamoDB Local files
123 | .dynamodb/
124 |
125 | # TernJS port file
126 | .tern-port
127 |
128 | # Stores VSCode versions used for testing VSCode extensions
129 | .vscode-test
130 |
131 | # yarn v2
132 | .yarn/cache
133 | .yarn/unplugged
134 | .yarn/build-state.yml
135 | .yarn/install-state.gz
136 | .pnp.*
137 |
138 | #env
139 | .env
140 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18.17.1
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 OSLabs Beta
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # KuberSee
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | ## About KuberSee
11 | KuberSee is an open source product that provides developers an easier way to visualize their Kubernetes clusters in real-time. Through our application, developers can obtain log data on their pods and view information on their pods, nodes, and namespaces.
12 |
13 | For more information visit our [website](http://www.kubersee.com/) and our [medium article](https://medium.com/@kubersee/visualize-your-kubernetes-clusters-and-log-data-in-real-time-d58eb47409e0).
14 |
15 |
16 | ## Tech Stacks
17 |
18 |
34 |
35 |
36 | ## Download the Application
37 | - Download the application from www.kubersee.com (for Mac users only).
38 | - Drag the zip file to your Application folder.
39 | - Open the zip file.
40 | - Once installed, control-click the app icon and choose "Open" from the shortcut menu. Then hit “cancel” and control-click the app icon a second time and choose “open”. You will receive a prompt to “open” the application, allowing you to override Apple's default preferences.
41 | - From here, if your cluster is already configured, you can sign up for an account and begin using the application to visualize your Kubernetes cluster.
42 |
43 | ## Configuration of Cloud Kubernetes Cluster
44 | - ### Configure with GCloud:
45 | - Enter command line: `gcloud init` This command will guide you through the authentication process and ask you to log in with your Google account using a web browser.
46 | - Follow the prompts to select your Google Cloud project, authenticate your account, and set your default region and zone.
47 | - Set Up Kubernetes Configuration: If you are using Google Kubernetes Engine (GKE) to create your Kubernetes clusters, you can use the following command to set up kubectl to use the credentials from your Google Cloud project: `gcloud container clusters get-credentials CLUSTER_NAME --zone ZONE --project PROJECT_ID` Replace CLUSTER_NAME with the name of your GKE cluster, ZONE with the GCP zone where your cluster is located, and PROJECT_ID with your Google Cloud project ID.
48 | - Verify Credentials: To verify that kubectl is using the correct credentials, you can use the following command to get information about your Kubernetes cluster:`kubectl cluster-info` This command will show you the API server address of your cluster, indicating that you are successfully using the credentials obtained from your Google Cloud project.
49 | - After following these steps, you should have the necessary credentials to interact with your Google Kubernetes Engine cluster using kubectl. If you need to switch between different Google Cloud projects or clusters, you can use the gcloud config set project PROJECT_ID and kubectl config use-context CONTEXT_NAME commands to switch between configurations.
50 |
51 | - ### Configure with Amazon EKS (Elastic Kubernetes Service)
52 | - Install Dependencies: Ensure you have the following dependencies installed on your machine:
53 | - AWS CLI: Install the AWS Command Line Interface as explained in the previous response.
54 | - kubectl: Install kubectl to interact with Kubernetes clusters. You can find installation instructions here: https://kubernetes.io/docs/tasks/tools/install-kubectl/
55 | - Configure AWS CLI: If you haven't already, configure the AWS CLI with your AWS access keys using the aws configure command. This step is necessary to access the Amazon EKS cluster.
56 | - Create or Access an Amazon EKS Cluster: Using the AWS Management Console or the AWS CLI, create an Amazon EKS cluster or access an existing one. Note down the cluster name, region, and AWS account ID associated with the cluster.
57 | - Install AWS IAM Authenticator: Amazon EKS requires the AWS IAM Authenticator to authenticate with your EKS cluster using IAM roles. You can find installation instructions here: https://docs.aws.amazon.com/eks/latest/userguide/install-aws-iam-authenticator.html
58 | - Configure kubectl for Amazon EKS: Run the following command to update the Kubernetes configuration and associate kubectl with your Amazon EKS cluster:`aws eks update-kubeconfig --name CLUSTER_NAME --region REGION` Replace CLUSTER_NAME with the name of your Amazon EKS cluster and REGION with the AWS region where your cluster is located. This command retrieves the necessary authentication information and updates the Kubernetes configuration file (~/.kube/config).
59 | - Verify Configuration: You can verify that kubectl is correctly configured to access your Amazon EKS cluster by running a simple command: `kubectl get nodes` This command should return the list of nodes in your Amazon EKS cluster. Now, your Kubernetes configuration is set up, and you can use kubectl to interact with your Amazon EKS cluster and manage Kubernetes resources.
60 | - Please note that managing Amazon EKS clusters may involve additional steps, such as creating and configuring worker nodes, setting up security groups, and managing IAM roles. For more detailed information on managing Amazon EKS, refer to the official AWS documentation: https://aws.amazon.com/eks/
61 |
62 | ## How to test through Minikube:
63 | Note: If Kubernetes Cluster configuration setup with .kube DISREGARD minikube
64 | - Download Docker Desktop
65 | - Install Docker Desktop on your device and enable the Kubernetes extension: https://www.docker.com/products/docker-desktop/
66 | - Install Minikube
67 | - Follow the installation guide for your device and install the appropriate minikube for your operating system. https://minikube.sigs.k8s.io/docs/start/
68 | - On your terminal, start your minikube: `minikube start`
69 | - Enable metrics: `minikube addons enable metrics-server`
70 | - Create a pod: `kubectl create deployment hello-node --image=registry.k8s.io/e2e-test-images/agnhost:2.39 -- /agnhost netexec --http-port=8080`
71 | - When you are done with the session, stop your minikube: `minikube stop`
72 |
73 |
74 | ______________________________________________________
75 | ## Authors
76 |
77 | | Developed By | Github | LinkedIn |
78 | | :----------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: |
79 | | Joey Cheng | [](https://github.com/joey-cheng-codes/) | [](https://www.linkedin.com/in/joey-cheng-works/) |
80 | | Elinor Weissberg | [](https://github.com/inorle) | [](https://www.linkedin.com/in/elinorweissberg/) |
81 | | Jordan Lopez | [](https://github.com/jordanlope) | [](https://www.linkedin.com/in/jordan-lopez-28538019a/) |
82 | | Alexis Contreras | [](https://github.com/alexis-contre) | [](https://www.linkedin.com/in/alexis-contre/) |
83 | | Tianqi Zhao | [](https://github.com/TianqiZhao416) | [](https://www.linkedin.com/in/tianqi-zhao416/) |
84 |
85 |
86 |
87 |
88 |
89 | [React.js]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB
90 | [React-url]: https://reactjs.org/
91 | [TS.js]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white
92 | [TS-url]: https://www.typescriptlang.org/
93 | [D3.js]: https://img.shields.io/badge/d3.js-F9A03C?style=for-the-badge&logo=d3.js&logoColor=white
94 | [D3-url]: https://d3js.org/
95 | [React Router]: https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white
96 | [React-Router-url]: https://reactrouter.com/en/main
97 | [JavaScript]: https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E
98 | [JavaScript-url]: https://www.javascript.com/
99 | [Node.js]: https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white
100 | [Node-url]: https://nodejs.org/
101 | [Kubernetes]: https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white
102 | [Kubernetes-url]: https://kubernetes.io/
103 | [Jest]: https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white
104 | [Jest-url]: https://jestjs.io/
105 | [AWS]: https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white
106 | [AWS-url]: https://aws.amazon.com/
107 | [DaisyUI]: https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white
108 | [DaisyUI-url]: https://daisyui.com/
109 | [Tailwind]: https://img.shields.io/badge/Tailwind-%231DA1F2.svg?style=for-the-badge&logo=tailwind-css&logoColor=white
110 | [Tailwind-url]: https://tailwindcss.com/
111 | [MUI]: https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white
112 | [MUI-url]: https://mui.com/
113 | [SocketIO]: https://img.shields.io/badge/Socket.io-black?style=for-the-badge&logo=socket.io&badgeColor=010101
114 | [SocketIO-url]: https://socket.io/
115 | [Electron.js]: https://img.shields.io/badge/Electron-191970?style=for-the-badge&logo=Electron&logoColor=white
116 | [Electron-url]: https://www.electronjs.org/
117 |
--------------------------------------------------------------------------------
/__mocks__/fileMock.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub';
--------------------------------------------------------------------------------
/__mocks__/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
--------------------------------------------------------------------------------
/assets/KuberSee-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/KuberSee/abe326df25f43a056287c4e07ec7c43df98cac1d/assets/KuberSee-1.png
--------------------------------------------------------------------------------
/assets/KuberSee-t.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/KuberSee/abe326df25f43a056287c4e07ec7c43df98cac1d/assets/KuberSee-t.png
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | ['@babel/preset-env', { targets: { node: 'current' } }],
4 | '@babel/preset-typescript',
5 | '@babel/preset-react'
6 | ],
7 | };
--------------------------------------------------------------------------------
/client/Components/App/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { Routes, Route } from 'react-router-dom';
3 | import NotFound from '../../Pages/NotFound/NotFound';
4 | import HomePage from '../../Pages/Home/HomePage';
5 | import LoginPage from '../../Pages/Login/LoginPage';
6 | import SignupPage from '../../Pages/Signup/SignupPage';
7 | import NavBar from '../NavBar/NavBar';
8 | import { io, Socket } from 'socket.io-client';
9 |
10 | const socket: Socket = io('http://localhost:3000');
11 |
12 | const App = () => {
13 | useEffect(() => {
14 | socket.emit('stats', null);
15 | }, []);
16 |
17 | return (
18 |
6 |