13 |
14 | 
15 |
16 |
17 |
23 |
24 |
25 | )
26 | };
27 |
28 | export default SideBar;
--------------------------------------------------------------------------------
/client/src/firebase.js:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from "firebase/app";
3 | import { getAnalytics } from "firebase/analytics";
4 | import { getAuth } from "firebase/auth";
5 | // TODO: Add SDKs for Firebase products that you want to use
6 | // https://firebase.google.com/docs/web/setup#available-libraries
7 |
8 | // Your web app's Firebase configuration
9 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
10 |
11 | //firebase config that returns firebase app instance of our connected firebase backend
12 | const firebaseConfig = {
13 | apiKey: "AIzaSyAz2atMQHm87mfUpSf9rcIVgoi5uMRXvA0",
14 | authDomain: "kubeest8.firebaseapp.com",
15 | projectId: "kubeest8",
16 | storageBucket: "kubeest8.appspot.com",
17 | messagingSenderId: "324917939409",
18 | appId: "1:324917939409:web:254b4b9366c062b80dc9f0",
19 | measurementId: "G-1FEJ0Z7V14"
20 | };
21 |
22 | // Initialize Firebase
23 | const app = initializeApp(firebaseConfig);
24 | const analytics = getAnalytics(app);
25 | export const auth = getAuth(app);
--------------------------------------------------------------------------------
/client/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router, Route, Routes, Switch } from "react-router-dom";
3 | import { AuthContextProvider } from "./context/AuthContent.js";
4 | import NavBar from "./components/NavBar.jsx";
5 | import Main from "./components/Main.jsx";
6 | import Signin from './components/Signin.jsx';
7 | import WelcomePage from './components/WelcomePage.jsx'
8 | import Protected from './components/Protected.js'
9 |
10 | import Flow from "./components/FlowChart.js";
11 | import "./assets/stylesheets/styles.css";
12 |
13 | const App = () => {
14 | return (
15 |
16 |
17 | */}
19 |
20 |
21 | } />
22 | } />
23 | }/>
24 |
25 | {/* */}
26 |
27 |
28 | );
29 | };
30 |
31 |
32 | export default App;
33 |
--------------------------------------------------------------------------------
/client/src/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mainLogo from '../assets/images/logo.png';
3 | import { Link } from 'react-router-dom';
4 | import '../assets/stylesheets/styles.css'
5 | import {UserAuth} from '../context/AuthContent'
6 |
7 |
8 | const NavBar = () => {
9 | const {user, logOut} = UserAuth();
10 |
11 | const handleSignOut = async () => {
12 | try {
13 | await logOut();
14 | } catch (error) {
15 | console.log(error)
16 | }
17 | }
18 |
19 | return (
20 |
21 |
22 | {/*
30 |
31 | )
32 | }
33 |
34 | export default NavBar;
--------------------------------------------------------------------------------
/client/src/components/Signin.jsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from 'react';
2 | import { GoogleButton } from 'react-google-button';
3 | import {UserAuth} from '../context/AuthContent';
4 | import { useNavigate } from 'react-router-dom';
5 |
6 | const Signin = () => {
7 |
8 | const {googleSignIn, user} = UserAuth();
9 |
10 | const navigate = useNavigate();
11 |
12 | const handleGoogleSignIn = async () => {
13 | try {
14 | await googleSignIn();
15 | } catch(error) {
16 | console.log(error);
17 | }
18 | };
19 |
20 | useEffect(() => {
21 | //if user is signed in, navigate to main page
22 | if(user !== null) {
23 | navigate('/main');
24 | }
25 | }, [user])
26 |
27 | return (
28 | */}
23 | {/* 
*/}
24 |
*/}
26 |
27 | {/* if user is logged in, display logout button, otherwise display sign in button */}
28 | {user?.displayName ? : Kube Est8
25 | {/*Get Started
}
29 |
29 |
34 | )
35 | }
36 |
37 | export default Signin;
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const HtmlWebpackPlugin = require("html-webpack-plugin");
3 |
4 | module.exports = {
5 | mode: process.env.NODE_ENV,
6 | entry: "./client/src/index.tsx",
7 | output: {
8 | path: path.resolve(__dirname, "./client/public"),
9 | filename: "bundle.js",
10 | },
11 | devServer: {
12 | port: "8090",
13 | static: ["./client/public"],
14 | open: true,
15 | hot: true,
16 | liveReload: true,
17 | historyApiFallback: true,
18 | proxy: {
19 | "/": "http://localhost:3333",
20 | },
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.(ts|tsx|js|jsx)$/,
26 | exclude: /node_modules/,
27 | use: {
28 | loader: "babel-loader",
29 | options: {
30 | presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"], // Already correctly included
31 | },
32 | },
33 | },
34 | {
35 | test: /.(css|scss)$/,
36 | exclude: /node_modules/,
37 | use: ["style-loader", "css-loader"],
38 | },
39 | {
40 | test: /\.(png|jpe?g|gif)$/i,
41 | use: [
42 | {
43 | loader: "file-loader",
44 | },
45 | ],
46 | },
47 | ],
48 | },
49 | plugins: [
50 | new HtmlWebpackPlugin({
51 | template: "./template.html",
52 | }),
53 | ],
54 | };
55 |
--------------------------------------------------------------------------------
/client/src/components/Main.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 | import {userAuth} from '../context/AuthContent.js';
3 | import SideBar from './SideBar.jsx'
4 | import Metrics from './Metrics.jsx'
5 | import Flow from './FlowChart.js';
6 |
7 | const Main = (props) => {
8 |
9 | const [display, setDisplay] = useState('');
10 |
11 |
12 | // FUNCTION TO CHANGE STATE FOR RENDERING CLUSTER INFO IN METRICS TABLE
13 | const clusterInfoRender = (e) => {
14 | setDisplay('clusterInfo');
15 | return;
16 | }
17 |
18 | // FUNCTION TO CHANGE STATE FOR RENDERING POD INFO
19 | const nodeInfoRender = (e) => {
20 | setDisplay('nodeInfo');
21 | return;
22 | }
23 |
24 | // FUNCTION TO CHANGE STATE FOR RENDERING
25 | const flowChartRender = (e) => {
26 | setDisplay('flowChart');
27 | return;
28 | }
29 |
30 | const homeRender = () => {
31 | setDisplay('');
32 | return;
33 | }
34 |
35 | const throughputRender = (e) => {
36 | setDisplay('throughput');
37 | return;
38 | }
39 |
40 |
41 | return (
42 |
43 |
30 |
32 |
33 | Sign In
31 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | )
52 | }
53 |
54 | export default Main;
--------------------------------------------------------------------------------
/server/server.ts:
--------------------------------------------------------------------------------
1 | import express, { Express, Request, Response, NextFunction } from "express";
2 | import dotenv from "dotenv";
3 | import path from "path";
4 | import cors from 'cors';
5 | import metricsRouter from './routes/metricsRouter'; // Assuming you'll also convert this to TS and use export default
6 |
7 | dotenv.config();
8 |
9 | const app: Express = express();
10 | const port: string | number = process.env.PORT || 3333;
11 |
12 | // HANDLE PARSING OF REQUEST BODY
13 | app.use(express.json());
14 | app.use(express.urlencoded({ extended: true }));
15 | app.use(cors());
16 |
17 | // SERVE STATIC FILES
18 | app.use(express.static(path.resolve(__dirname, '../client/public')));
19 |
20 | // METRICS ROUTER
21 | app.use('/metrics', metricsRouter);
22 |
23 | // CATCH-ALL ROUTE HANDLER
24 | app.use('/*', (req: Request, res: Response) => {
25 | return res.status(404).send('Page not found - 404');
26 | });
27 |
28 | // Global error handler
29 | app.use((err: any, req: Request, res: Response, next: NextFunction) => {
30 | const defaultErr = {
31 | log: 'Express error handler caught unknown middleware error',
32 | status: 500,
33 | message: { err: 'An error occurred' }
34 | };
35 | const errorObj = { ...defaultErr, ...err };
36 | console.log(errorObj.log);
37 | return res.status(errorObj.status).json(errorObj.message);
38 | });
39 |
40 | app.listen(3333, () => {
41 | console.log(`[server]: Server is running at http://localhost:${port}`);
42 | });
43 |
44 | export default app;
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5", // Compile to ES5
4 | "lib": ["dom", "dom.iterable", "esnext"], // Include DOM and ESNext lib for frontend code
5 | "allowJs": true, // Allow JavaScript files to be compiled
6 | "skipLibCheck": true, // Skip type checking of all declaration files (*.d.ts)
7 | "esModuleInterop": true, // Enables emit interoperability between CommonJS and ES Modules
8 | "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
9 | "strict": true, // Enable all strict type-checking options
10 | "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file
11 | "module": "commonjs", // Use commonjs module resolution
12 | "moduleResolution": "node", // Use Node.js module resolution strategy
13 | "resolveJsonModule": true, // Allow importing .json files
14 | "isolatedModules": true, // Ensure each file can be safely transpiled without relying on other imports
15 | "noEmit": true, // Do not emit outputs (useful when using Babel for transpilation)
16 | "jsx": "react-jsx" // Support JSX in .tsx files
17 | },
18 | "include": [
19 | "client/src/**/*", // Include your frontend source files
20 | "server/**/*" // Include your backend source files
21 | ],
22 | "exclude": [
23 | "node_modules", // Exclude the node_modules directory
24 | "**/*.spec.ts" // Exclude test files
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/client/src/components/FlowChart.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Fragment } from "react";
3 | import { useState, useCallback } from 'react';
4 | import ReactFlow, { applyEdgeChanges, applyNodeChanges, Controls, Background, MiniMap} from 'react-flow-renderer';
5 |
6 | import '../assets/stylesheets/FlowChart.css'
7 |
8 | const initialEdges = [{ id: 'e1-2', source: '1', target: '2'}];
9 |
10 | const initialNodes = [
11 | {
12 | id: '1',
13 | data: {label: 'Node 1'},
14 | position: { x: 0, y: 0 },
15 | type: 'input',
16 | },
17 | {
18 | id: '2',
19 | data: {label: 'Node 2'},
20 | position: {x: 100, y: 100},
21 |
22 | },
23 | ];
24 | const CustomNode = ({ id, data }) => {
25 | return (
26 |
27 | {data.label}
28 |
29 | );
30 | };
31 |
32 | function Flow() {
33 | const [nodes, setNodes] = useState(initialNodes);
34 | const [name, setName] = useState("")
35 | const [edges, setEdges] = useState(initialEdges);
36 |
37 | const addNode = () => {
38 | setNodes (e => e.concat({
39 | id: (e.length+1).toString(),
40 | data:{label: `${name}`},
41 | position: {x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight}
42 | }))
43 | }
44 |
45 | return (
46 |
47 |
48 |
51 |
52 | {
54 | if( n.type === 'input') return 'blue';
55 |
56 | return '#FFCC00'
57 | }}
58 | />
59 |
61 |
71 |
72 | )};
73 |
74 | export default Flow;
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "kube-est8",
3 | "version": "1.0.0",
4 | "description": "Kube Est8 is a Kubernetes Visualization tool that assists with detecting bottlenecks and security vulnerabilities.",
5 | "main": "./client/src/index.js",
6 | "scripts": {
7 | "start": "nodemon server/server.ts",
8 | "test": "jest",
9 | "test:watch": "npm run test -- --watch",
10 | "build": "webpack",
11 | "dev": "concurrently \"cross-env NODE_ENV=development webpack-dev-server --open --hot --progress --color\" \"nodemon ./server/server.ts\""
12 | },
13 | "author": "Brandon Hernandez, Erika Wester, Ines Chavez, Patrick Post",
14 | "license": "ISC",
15 | "dependencies": {
16 | "@babel/preset-env": "^7.23.8",
17 | "@kubernetes/client-node": "^0.20.0",
18 | "axios": "^1.6.7",
19 | "cors": "^2.8.5",
20 | "css-loader": "^6.10.0",
21 | "express": "^4.18.2",
22 | "file-loader": "^6.2.0",
23 | "firebase": "^10.8.0",
24 | "nodemon": "^3.1.1",
25 | "react": "^18.2.0",
26 | "react-dom": "^18.2.0",
27 | "react-flow": "^1.0.3",
28 | "react-flow-renderer": "^10.3.17",
29 | "react-google-button": "^0.7.2",
30 | "react-router-dom": "^6.22.0",
31 | "reactflow": "^11.10.3"
32 | },
33 | "devDependencies": {
34 | "@babel/core": "^7.23.7",
35 | "@babel/plugin-syntax-jsx": "^7.23.3",
36 | "@babel/preset-react": "^7.23.3",
37 | "@babel/preset-typescript": "^7.23.3",
38 | "@types/cors": "^2.8.17",
39 | "@types/dotenv": "^8.2.0",
40 | "@types/express": "^4.17.21",
41 | "@types/jest": "^29.5.12",
42 | "@types/node": "^20.11.20",
43 | "@types/react": "^18.2.58",
44 | "@types/react-dom": "^18.2.19",
45 | "babel-loader": "^9.1.3",
46 | "concurrently": "^8.2.2",
47 | "cross-env": "^7.0.3",
48 | "css-loader": "^6.10.0",
49 | "html-webpack-plugin": "^5.6.0",
50 | "jest": "^29.7.0",
51 | "style-loader": "^3.3.4",
52 | "supertest": "^6.3.4",
53 | "ts-node": "^10.9.2",
54 | "typescript": "^5.3.3",
55 | "webpack": "^5.90.0",
56 | "webpack-cli": "^5.1.4",
57 | "webpack-dev-server": "^4.15.1"
58 | },
59 | "proxy": "http://localhost:3333"
60 | }
61 |
--------------------------------------------------------------------------------
/client/src/context/AuthContent.js:
--------------------------------------------------------------------------------
1 | import { useContext, createContext, useEffect } from "react";
2 | import { useState } from 'react';
3 | import React from 'react';
4 | //import authentication from firebase library
5 | import { auth } from '../firebase';
6 | //all of the features needed from firebase
7 | import {
8 | GoogleAuthProvider,
9 | signInWithPopup,
10 | signInWithRedirect,
11 | signOut,
12 | onAuthStateChanged,
13 | } from "firebase/auth";
14 |
15 | const AuthContext = createContext();
16 |
17 | export const AuthContextProvider = ({ children }) => {
18 | //useState Functionality
19 | const [user, setUser] = useState({});
20 |
21 | //declare function for googleSignIn
22 | const googleSignIn = () => {
23 | //create GoogleAuthProvider (this is built in method with firebase)
24 | const provider = new GoogleAuthProvider();
25 | provider.setCustomParameters({
26 | prompt: 'select_account'
27 | })
28 | //take auth and provider with pop up
29 | signInWithPopup(auth, provider)
30 | .then((result) => {
31 | // handle successful authentication
32 | console.log('Authentication successful', result.user);
33 | })
34 | .catch((error) => {
35 | // handle authentication error
36 | console.log('Authentication error', error);
37 | });
38 | // signInWithRedirect(auth, provider);
39 | }
40 |
41 | //function for logOut (pass this down to return statement)
42 | const logOut = () => {
43 | signOut(auth)
44 | }
45 |
46 | //checking for onAuthStateChanged - imported from firebase
47 | useEffect(() =>{
48 | const unsubscribe = onAuthStateChanged(auth, (currentUser)=> {
49 | setUser(currentUser)
50 | // console.log('User', currentUser)
51 | })
52 | return () => {
53 | unsubscribe();
54 | }
55 | }, [])
56 |
57 |
58 | return (
59 | // pass down user
60 |
62 | setName(e.target.value)}
64 | name="title"/>
65 |
68 |
69 |
70 |
14 | {/*
23 |
24 |
25 |
26 | )
27 | }
28 |
29 | /*-------------------CONDITIONALLY RENDER NODE INFO BASED ON STATE-----------------*/
30 | if (props.display === 'nodeInfo') {
31 | return (
32 | Cluster Overview
*/} 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
53 |
59 | )
60 | }
61 |
62 | export default MetricsTable;
--------------------------------------------------------------------------------
/client/src/components/NodeInfo.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 |
3 | const NodeInfo = (props) => {
4 |
5 | // All this peace of code, fetches the data to the server, iterates over the data
6 | //and then is tranfer so is render into the Main display.
7 | const [nodesList, setNodesList] = useState([]);
8 |
9 | useEffect(() => {
10 | nodes();
11 | }, []);
12 |
13 | const nodes = async () => {
14 | const response = await fetch('/metrics');
15 |
16 | setNodesList(await response.json())
17 | };
18 |
19 | return (
20 |
54 | Welcome to your Kube Est8, {user?.displayName}.
55 |
56 | Please use the sidebar to render desired cluster info. 57 |
58 | 56 | Please use the sidebar to render desired cluster info. 57 |
21 | {nodesList.map((data) => {
22 | return (
23 |
44 |
45 | );
46 |
47 | ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
48 |
49 | // The code below will render in the screen the chart that Erika created
50 |
51 | // return (
52 | //
24 |
39 | )
40 | })
41 |
42 | }
43 | {`Name: ${data.name}`}
25 |{`UID: ${data.uid}`}
26 |{`Day created: ${data.creationTimestamp}`}
27 |{`CPU capacity: ${data.capacity.cpuCapacity}`}
28 |{`Memory capacity: ${data.capacity.memoryCapacity}`}
29 |{`Pod capacity: ${data.capacity.podsCapacity}`}
30 |{`Last heartbeat: ${data.presureStatus.lastHeartbeatTime}`}
31 |{`Kubelet status: ${data.presureStatus.status}`}
32 |{`Memory pressure: ${data.presureStatus.memoryPressure}`}
33 |{`Disk pressure: ${data.presureStatus.diskPressure}`}
34 |{`'PID pressure': ${data.presureStatus.PIDPressure}`}
35 |{`Total images: ${data.totalImages}`}
36 |----------------------------------------------------------------
37 | 38 |
53 | //
55 | //
56 | //
96 | //
97 | // );
98 |
99 |
100 | };
101 |
102 | export default NodeInfo;
103 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Your Nodes
54 | //| Node (will insert the data pulled from backend) | 58 | //Name: | 59 | //CPU/Memory: | 60 | //Role: | 61 | //Message Throughput: | 62 | //Number of Deployments: | 63 | //Number of Pods: | 64 | //
|---|---|---|---|---|---|---|
| 1 | 69 | //Erika's Node | 70 | //56% | 71 | //The role of the node | 72 | //The Message Throughput | 73 | //2 Deployments! | 74 | //5 pods! | 75 | //
| 2 | 78 | //Chunky Bean's Node | 79 | //56% | 80 | //The role of the node | 81 | //The Message Throughput | 82 | //3 Deployments! | 83 | //7 pods! | 84 | // {/*
| 3 | 87 | //Peep's Node | 88 | //70% CPU | 89 | //The role of the node | 90 | //The Message Throughput | 91 | //1 Deployment! | 92 | //2 pods! | 93 | //
3 | 
4 |
5 |
6 | 7 | Monitor your Kubernetes cluster's resource usage and vulnerabilities across different levels 🖥️ 8 |
9 | 10 |
12 | 
15 | 
18 |