├── .gitignore
├── README.md
├── client
    ├── App.tsx
    ├── components
    │   ├── ChartTable.tsx
    │   ├── ClusterInput.tsx
    │   ├── GuageChart.tsx
    │   ├── GuageChart2.tsx
    │   ├── LineChart2.tsx
    │   ├── Navbar.tsx
    │   └── SnapshotButton.tsx
    ├── index.tsx
    ├── pages
    │   ├── Dashboard.tsx
    │   ├── History.tsx
    │   ├── NotFoundPage.tsx
    │   ├── SignIn.tsx
    │   ├── Signup.tsx
    │   ├── SnapshotPage.tsx
    │   ├── SplashPage.tsx
    │   └── WelcomePage.tsx
    ├── public
    │   ├── Assets
    │   │   ├── GPU image.jpg:Zone.Identifier
    │   │   ├── GPU-image.jpg
    │   │   ├── Ismael LinkedIn Headshot.jpg:Zone.Identifier
    │   │   ├── Ismael-Headshot.jpg
    │   │   ├── Jeff Headshot.jpg:Zone.Identifier
    │   │   ├── Jeff-Headshot.jpg
    │   │   ├── Jin Headshot.jpg:Zone.Identifier
    │   │   ├── Jin-Headshot.jpg
    │   │   ├── Sonia-Headshot.jpg
    │   │   ├── demo
    │   │   │   ├── auto_refresh.gif
    │   │   │   ├── input_url.gif
    │   │   │   ├── save_snapshot.gif
    │   │   │   └── signup.gif
    │   │   ├── favicon.png
    │   │   ├── kale logo.png:Zone.Identifier
    │   │   ├── kale-logo.png
    │   │   ├── kubernetes illustration.jpg:Zone.Identifier
    │   │   ├── kubernetes-illustration.jpg
    │   │   └── welcome-page.png
    │   └── index.html
    ├── slices
    │   ├── metricsApi.ts
    │   ├── snapshotsApi.ts
    │   ├── store.ts
    │   ├── uiSlice.ts
    │   ├── userApi.ts
    │   └── userSlice.ts
    └── stylesheets
    │   └── styles.css
├── cypress.config.ts
├── cypress
    ├── e2e
    │   ├── auth.cy.ts
    │   ├── dashboardPage.cy.ts
    │   ├── historyPage.cy.ts
    │   ├── navigation.cy.ts
    │   ├── splashPage.cy.ts
    │   └── welcomePage.cy.ts
    └── support
    │   ├── commands.ts
    │   ├── component-index.html
    │   ├── component.ts
    │   └── e2e.ts
├── package.json
├── server
    ├── Models
    │   ├── snapshotModel.ts
    │   └── userModel.ts
    ├── controllers
    │   ├── apiController.ts
    │   ├── authController.ts
    │   └── dbController.ts
    ├── router
    │   ├── authRouter.ts
    │   └── dbRouter.ts
    └── server.ts
├── tailwind.config.js
├── tsconfig.json
├── types.d.ts
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | node_modules
3 | package-lock.json
4 | dist
5 | .env
6 | secret*.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <h1 align="center">
  3 |     <img alt="kale logo" height="60" src="./client/public/Assets/kale-logo.png">
  4 |     <p>kale</p>
  5 |   </h1>
  6 |   
  7 |   <p>kale is an open-source Kubernetes tool for monitoring and autoscaling machine learning workloads, specializing in GPU metrics for optimized scaling decisions.</p>
  8 | </div>
  9 | 
 10 | <img src="./client/public/Assets/welcome-page.png" alt="welcome to kale" />
 11 | <p></p>
 12 | <p align="center">
 13 |   <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/t/oslabs-beta/kale"/>
 14 |   <img alt="Github Last Commit" src="https://img.shields.io/github/last-commit/oslabs-beta/kale"/>
 15 |   <img alt="Github Created At" src="https://img.shields.io/github/created-at/oslabs-beta/kale  "/>
 16 | </p>
 17 | 
 18 | ## Features
 19 | 
 20 | - 📊 **Real-time GPU Monitoring**: Get live updates on utilization, temperature, power draw, and other essential GPU metrics with kale.
 21 | - 🗃️ **Metric Snapshots**: kale captures historical data points beyond real-time monitoring. These snapshots allow for in-depth analysis and performance optimization over time.
 22 | - 🧠 **Smart Scaling**: Optimize resource allocation for machine learning workloads with GPU-driven HPA configuration.
 23 | 
 24 | ## Getting Started
 25 | 
 26 | The simplest and most efficient way to dive into kale is through [our official hosted service](https://openkale.com/).
 27 | 
 28 | ### Prerequisites
 29 | 
 30 | Here's what you need to be able to run kale:
 31 | 
 32 | - GPU-enabled Kubernetes cluster
 33 | - Prometheus server integrated with cluster
 34 | - NVIDIA DCGM-exporter deployed in cluster
 35 | 
 36 | ## Demo
 37 | 
 38 | 1. 📝 Sign up for kale.
 39 | 
 40 |    <img className="rounded-lg" src='./client/public/Assets/demo/signup.gif' alt="demo gif" />
 41 | 
 42 | 2. 📈 Enter Prometheus Server URL and Pod Name you would like to monitor.
 43 | 
 44 |    <img className="rounded-lg" src='./client/public/Assets/demo/input_url.gif' alt="demo gif" />
 45 | 
 46 | 3. 📸 Take a snapshot of your pod metrics and view your saved snapshots in your 'History' tab. Click on a saved snapshot to open up its metrics.
 47 | 
 48 |    <img className="rounded-lg" src='./client/public/Assets/demo/save_snapshot.gif' alt="demo gif" />
 49 | 
 50 | 4. 🔄 Dashoboard updates metrics every 30 seconds.
 51 | 
 52 |    <img className="rounded-lg" src='./client/public/Assets/demo/auto_refresh.gif' alt="demo gif" />
 53 | 
 54 | ## Run kale locally
 55 | 
 56 | ⚠️ NOTE: You won't be able to save snapshots if you run kale locally.
 57 | 
 58 | ### 1. Clone the repository
 59 | 
 60 | ```shell
 61 | git clone https://github.com/oslabs-beta/kale.git
 62 | cd kale
 63 | ```
 64 | 
 65 | ### 2. Install npm dependencies
 66 | 
 67 | ```shell
 68 | npm install
 69 | ```
 70 | 
 71 | ### 3. Run the dev server
 72 | 
 73 | ```shell
 74 | npm run dev
 75 | ```
 76 | 
 77 | ### 4. Open the app in your browser
 78 | 
 79 | Visit [http://localhost:8080](http://localhost:8080) in your browser.
 80 | 
 81 | ## Beta Limitations and Exciting Future
 82 | 
 83 | CPU-Based Proof of Concept: Currently, kale uses CPU metrics as a proxy for GPU utilization. This provides a valuable proof of concept.
 84 | 
 85 | **Roadmap: We envision exciting features including:**
 86 | 
 87 | - **GPU Metric Integration**: Replace CPU monitoring with direct GPU metric monitoring for enhanced scaling accuracy tailored to ML workloads.
 88 | - **Multi-Pod Monitoring**: Monitor resource consumption trends across multiple pods.
 89 | - **Snapshot Customization**: Allow users to rename snapshots for better organization.
 90 | - **Autoscaling Integration**: Directly trigger Kubernetes cluster scaling actions based on in-app analysis.
 91 | 
 92 | ## Contributing
 93 | 
 94 | kale is open-source and welcomes your contributions! Here's how to get involved:
 95 | 
 96 | 1. Fork the repository.
 97 | 2. Make your desired changes.
 98 | 3. Submit a pull request for review.
 99 | 
100 | ## Our Contributors
101 | 
102 | Sonia Han | [LinkedIn](https://www.linkedin.com/in/soheunhan/) | [Github](https://github.com/soheunhan)
103 | 
104 | Jeffrey Chao | [LinkedIn](https://www.linkedin.com/in/jeffrey-chao-9479142a/) | [Github](https://github.com/jeffplv)
105 | 
106 | Jinseong Nam | [LinkedIn](https://www.linkedin.com/in/jinseong-nam-8b6815212/) | [Github](https://github.com/thejinnam)
107 | 
108 | Ismael Boussatta | [LinkedIn](https://www.linkedin.com/in/ismael-boussatta-2493b2126/) | [Github](https://github.com/iboussat)
109 | 


--------------------------------------------------------------------------------
/client/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './stylesheets/styles.css';
 3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 4 | import NotFoundPage from './pages/NotFoundPage';
 5 | import WelcomePage from './pages/WelcomePage';
 6 | import Dashboard from './pages/Dashboard';
 7 | import History from './pages/History';
 8 | import SnapshotPage from './pages/SnapshotPage';
 9 | import SignInContainer from './pages/SignIn';
10 | import SignupContainer from './pages/Signup';
11 | import SplashPage from './pages/SplashPage';
12 | 
13 | const router = createBrowserRouter([
14 |   {
15 |     path: '/welcome',
16 |     element: <WelcomePage />,
17 |     errorElement: <NotFoundPage />,
18 |   },
19 |   {
20 |     path: '/',
21 |     element: <SplashPage />,
22 |     errorElement: <NotFoundPage />,
23 |   },
24 |   {
25 |     path: '/dashboard',
26 |     element: <Dashboard />,
27 |     errorElement: <NotFoundPage />,
28 |   },
29 |   {
30 |     path: '/history',
31 |     element: <History />,
32 |     errorElement: <NotFoundPage />,
33 |   },
34 |   {
35 |     path: '/history/:snapshotId',
36 |     element: <SnapshotPage />,
37 |     errorElement: <NotFoundPage />,
38 |   },
39 |   {
40 |     path: '/signin',
41 |     element: <SignInContainer />,
42 |     errorElement: <NotFoundPage />,
43 |   },
44 |   {
45 |     path: '/signup',
46 |     element: <SignupContainer />,
47 |     errorElement: <NotFoundPage />,
48 |   },
49 | ]);
50 | 
51 | export default function App() {
52 |   return <RouterProvider router={router} />;
53 | }
54 | 


--------------------------------------------------------------------------------
/client/components/ChartTable.tsx:
--------------------------------------------------------------------------------
 1 | import React, { lazy } from 'react';
 2 | import GuageChart from './GuageChart';
 3 | import type { MetricsData } from '../../types';
 4 | import LineChart2 from './LineChart2';
 5 | 
 6 | type ChartTableProps = {
 7 |   metrics: { [key: string]: MetricsData };
 8 | };
 9 | 
10 | export default function ChartTable({ metrics }: ChartTableProps) {
11 |   const lineChartArr: JSX.Element[] = [];
12 |   const gaugeChartArr: JSX.Element[] = [];
13 | 
14 |   for (let i = 0; i < Object.keys(metrics).length; i++) {
15 |     lineChartArr.push(
16 |       <LineChart2
17 |         metric={Object.keys(metrics)[i]}
18 |         value={metrics[Object.keys(metrics)[i]].value}
19 |         time={metrics[Object.keys(metrics)[i]].time}
20 |         key={i}
21 |         id={`line-chart-${i}`}
22 |       />
23 |     );
24 |   }
25 |   for (let i = 0; i < Object.keys(metrics).length; i++) {
26 |     const val =
27 |       metrics[Object.keys(metrics)[i]].value[
28 |         metrics[Object.keys(metrics)[i]].value.length - 1
29 |       ];
30 |     console.log(val);
31 |     gaugeChartArr.push(
32 |       <GuageChart
33 |         metric={Object.keys(metrics)[i]}
34 |         value={val !== undefined ? +val.toFixed(4) : 0.2335}
35 |         time={
36 |           metrics[Object.keys(metrics)[i]].time[
37 |             metrics[Object.keys(metrics)[i]].time.length - 1
38 |           ]
39 |         }
40 |         key={i}
41 |         id={`gauge-chart-${i}`}
42 |       />
43 |     );
44 |   }
45 |   return (
46 |     <>
47 |       <div className="flex max-w-screen-xl flex-wrap items-center justify-start mx-6 my-6">
48 |         {gaugeChartArr}
49 |       </div>
50 | 
51 |       <div className="flex max-w-screen-xl flex-wrap items-center justify-start mx-6 my-6">
52 |         {lineChartArr[0]}
53 |         {lineChartArr[0]}
54 |       </div>
55 |     </>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/client/components/ClusterInput.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | type handleClickArg = { url: string; podName: string };
 5 | 
 6 | type ClusterInputProps = {
 7 |   handleUrlChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 8 |   handlePodNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 9 |   handleClick: (arg: handleClickArg) => void;
10 |   url: string;
11 |   podName: string;
12 | };
13 | 
14 | //passing in all props from the Welcome page
15 | const ClusterInput = ({
16 |   handlePodNameChange,
17 |   handleClick,
18 |   handleUrlChange,
19 |   url,
20 |   podName,
21 | }: ClusterInputProps) => {
22 |   return (
23 |     <div className="mt-10 flex items-center justify-center gap-x-6">
24 |       <input
25 |         type="text"
26 |         id="url-input"
27 |         placeholder="Your Prometheus URL"
28 |         onChange={handleUrlChange}
29 |         className="url-input bg-zinc-50 border border-zinc-300 text-zinc-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
30 |       />
31 |       <input
32 |         type="text"
33 |         id="url-input"
34 |         placeholder="Pod Name"
35 |         onChange={handlePodNameChange}
36 |         className="url-input bg-zinc-50 border border-zinc-300 text-zinc-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-2/4 p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
37 |       />
38 |       <Link
39 |         to="/dashboard"
40 |         id="go-button"
41 |         className="rounded-md bg-kalegreen-600 px-3.5 py-2.5 text-sm text-white shadow-sm hover:bg-kalegreen-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kalegreen-600"
42 |       >
43 |         <button onClick={() => handleClick({ url, podName })}> Go </button>
44 |       </Link>
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default ClusterInput;
50 | 


--------------------------------------------------------------------------------
/client/components/GuageChart.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useRef, useEffect } from 'react';
 3 | import * as d3 from 'd3';
 4 | 
 5 | type GuageChartProps = {
 6 |   metric: string;
 7 |   value: number;
 8 |   time: string;
 9 |   id: string;
10 | };
11 | 
12 | export default function GuageChart({
13 |   metric,
14 |   value,
15 |   time,
16 |   id,
17 | }: GuageChartProps) {
18 |   console.log('GuageChart', metric, value, time);
19 | 
20 |   const data = [value, 1 - value];
21 |   const svgRef = useRef();
22 | 
23 |   useEffect(() => {
24 |     //setting up svg container
25 |     const w = 320;
26 |     const h = 180;
27 |     const radius = +w / 2;
28 |     const svg = d3
29 |       .select(svgRef.current)
30 |       .attr('width', w)
31 |       .attr('height', h)
32 |       .style('display', 'block')
33 |       .style('margin', '40px')
34 |       .style('overflow', 'visible');
35 |     // .style('background-color', 'white');
36 | 
37 |     //setting up pie chart
38 |     const pieGenerator = d3
39 |       .pie()
40 |       .startAngle(-0.5 * Math.PI)
41 |       .endAngle(0.5 * Math.PI)
42 |       .sort(null);
43 |     const instructions = pieGenerator(data);
44 |     const arcGenerator: any = d3
45 |       .arc()
46 |       .innerRadius(radius / 2)
47 |       .outerRadius(radius);
48 | 
49 |     const color = d3.scaleOrdinal(d3.schemeSet2);
50 | 
51 |     //setting up svg data
52 |     svg
53 |       .selectAll()
54 |       .data(instructions)
55 |       .join('path')
56 |       .attr('d', arcGenerator)
57 |       .attr('fill', (insctruction, i) => (i === 0 ? '#1E8A5A' : '#e11d48'))
58 |       .attr('opacity', 0.7)
59 |       .style('transform', `translate(${radius}px, ${radius}px)`);
60 | 
61 |     // setting up text
62 |     svg
63 |       .append('text')
64 |       .attr('transform', `translate(${radius}, ${radius})`)
65 |       .attr('text-anchor', 'middle')
66 |       .style('font-size', 30)
67 |       .style('fill', '#e4e4e7')
68 |       .text(+data[0].toFixed(4) * 100 + '%');
69 |   }, [data]);
70 | 
71 |   return (
72 |     <div
73 |       className="flex flex-col h-auto w-1/3 items-center justify-center"
74 |       id={id}
75 |     >
76 |       <p className="text-lg text-center dark:text-kalegreen-300">{metric}</p>
77 |       <svg ref={svgRef}></svg>
78 |     </div>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/client/components/GuageChart2.tsx:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import {
  3 |   RadialBarChart,
  4 |   RadialBar,
  5 |   Legend,
  6 |   Tooltip,
  7 |   ResponsiveContainer,
  8 |   PolarAngleAxis,
  9 |   PolarRadiusAxis,
 10 | } from 'recharts';
 11 | 
 12 | type GuageChartProps = {
 13 |   metric: string;
 14 |   value: number;
 15 |   time: string;
 16 | };
 17 | 
 18 | // const data = [
 19 | //   {
 20 | //     name: 'Target (5%)',
 21 | //     uv: 5,
 22 | //     pv: 4567,
 23 | //     fill: '#777',
 24 | //   },
 25 | //   {
 26 | //     name: 'Growth %',
 27 | //     uv: 8.3,
 28 | //     pv: 2400,
 29 | //     fill: '#22AA22',
 30 | //   },
 31 | // ];
 32 | 
 33 | const GuageChart2 = ({ metric, value, time }: GuageChartProps) => {
 34 |   return (
 35 |     <ResponsiveContainer width="95%" height={400}>
 36 |       <RadialBarChart
 37 |         innerRadius="80%"
 38 |         outerRadius="100%"
 39 |         barSize={10}
 40 |         data={[value]}
 41 |       >
 42 |         <PolarAngleAxis
 43 |           type="number"
 44 |           domain={[360, 180]}
 45 |           allowDataOverflow={true}
 46 |           tick={false}
 47 |         />
 48 |         <PolarRadiusAxis angle={30} domain={[0, 100]} tick={false} />
 49 |         <RadialBar
 50 |           label={{ fill: '#666', position: 'insideStart' }}
 51 |           background
 52 |           dataKey="value"
 53 |         />
 54 |         <text
 55 |           x="50%"
 56 |           y="50%"
 57 |           dy={+12}
 58 |           style={{ fontSize: 48, fontWeight: 'bold', fill: '#22AA22' }}
 59 |           width={200}
 60 |           textAnchor="middle"
 61 |         >
 62 |           8.3%
 63 |         </text>
 64 |         <text
 65 |           x="50%"
 66 |           y="60%"
 67 |           style={{ fontSize: 24, fontWeight: 'bold', fill: '#777' }}
 68 |           width={200}
 69 |           textAnchor="middle"
 70 |         >
 71 |           Target: 5%
 72 |         </text>
 73 |         <Legend
 74 |           iconSize={20}
 75 |           width={120}
 76 |           height={100}
 77 |           layout="vertical"
 78 |           verticalAlign="bottom"
 79 |           align="center"
 80 |         />
 81 |         <Tooltip />
 82 |       </RadialBarChart>
 83 |     </ResponsiveContainer>
 84 |   );
 85 | };
 86 | 
 87 | export default GuageChart2;
 88 | 
 89 | // import React, { PureComponent } from 'react';
 90 | // import { PieChart, Pie, Cell, Label } from 'recharts';
 91 | 
 92 | // const RADIAN = Math.PI / 180;
 93 | // const data: any = [
 94 | //   { name: 'A', value: 80, color: '#ffffff' },
 95 | //   { name: 'B', value: 45, color: '#FFFF00' },
 96 | //   { name: 'C', value: 25, color: '#FF0000' },
 97 | // ];
 98 | // const cx = 150;
 99 | // const cy = 200;
100 | // const iR = 50;
101 | // const oR = 100;
102 | // const value = data[0].value;
103 | // const chartValue = data[0].value;
104 | 
105 | // const needle = (
106 | //   value: number,
107 | //   data: any[],
108 | //   cx: number,
109 | //   cy: number,
110 | //   iR: number,
111 | //   oR: number,
112 | //   color: string
113 | // ) => {
114 | //   let total = 0;
115 | //   data.forEach((v) => {
116 | //     total += v.value;
117 | //   });
118 | //   const ang = 180.0 * (1 - value / total);
119 | //   const length = (iR + 2 * oR) / 3;
120 | //   const sin = Math.sin(-RADIAN * ang);
121 | //   const cos = Math.cos(-RADIAN * ang);
122 | //   const r = 5;
123 | //   const x0 = cx + 5;
124 | //   const y0 = cy + 5;
125 | //   const xba = x0 + r * sin;
126 | //   const yba = y0 - r * cos;
127 | //   const xbb = x0 - r * sin;
128 | //   const ybb = y0 + r * cos;
129 | //   const xp = x0 + length * cos;
130 | //   const yp = y0 + length * sin;
131 | 
132 | //   return [
133 | //     <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" />,
134 | //     <path
135 | //       d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`}
136 | //       stroke="#none"
137 | //       fill={color}
138 | //     />,
139 | //   ];
140 | // };
141 | 
142 | // export default class Example extends PureComponent {
143 | //   render() {
144 | //     return (
145 | //       <PieChart width={400} height={500}>
146 | //         <Pie
147 | //           dataKey="value"
148 | //           startAngle={180}
149 | //           endAngle={0}
150 | //           data={data}
151 | //           cx={cx}
152 | //           cy={cy}
153 | //           innerRadius={iR}
154 | //           outerRadius={oR}
155 | //           fill="#8884d8"
156 | //           stroke="none"
157 | //         >
158 | //           {data.map((entry: { color: string }, index: any) => (
159 | //             <Cell key={`cell-${index}`} fill={entry.color} />
160 | //           ))}
161 | 
162 | //           <Label
163 | //             value={chartValue}
164 | //             position="centerBottom"
165 | //             offset={-40}
166 | //             className="gauge-label"
167 | //             color="white"
168 | //             fontSize="30px"
169 | //             fontWeight="bold"
170 | //           />
171 | //         </Pie>
172 | //         {/* {needle(value, data, cx, cy, iR, oR, '#d0d000')} */}
173 | //       </PieChart>
174 | //     );
175 | //   }
176 | // }
177 | 


--------------------------------------------------------------------------------
/client/components/LineChart2.tsx:
--------------------------------------------------------------------------------
 1 | // import {
 2 | //   LineChart,
 3 | //   Line,
 4 | //   CartesianGrid,
 5 | //   Tooltip,
 6 | //   XAxis,
 7 | //   YAxis,
 8 | //   Legend,
 9 | // } from 'recharts';
10 | import React from 'react';
11 | import {
12 |   Chart as ChartJS,
13 |   CategoryScale,
14 |   LinearScale,
15 |   PointElement,
16 |   LineElement,
17 |   Title,
18 |   Tooltip,
19 |   Legend,
20 | } from 'chart.js';
21 | import { Line } from 'react-chartjs-2';
22 | import { MetricsData } from '../../types';
23 | 
24 | ChartJS.register(
25 |   CategoryScale,
26 |   LinearScale,
27 |   PointElement,
28 |   LineElement,
29 |   Title,
30 |   Tooltip,
31 |   Legend
32 | );
33 | 
34 | type LineChartProps = {
35 |   time: string[];
36 |   value: number[];
37 |   metric: string;
38 |   id: string;
39 | };
40 | 
41 | export default function LineChart2({
42 |   metric,
43 |   value,
44 |   time,
45 |   id,
46 | }: LineChartProps) {
47 |   // const data = [
48 |   //   { name: 'Page A', uv: 400 },
49 |   //   { name: 'Page B', uv: 300 },
50 |   //   { name: 'Page C', uv: 300 },
51 |   //   { name: 'Page D', uv: 200 },
52 |   //   { name: 'Page E', uv: 100 },
53 |   // ];
54 | 
55 |   const data = {
56 |     labels: time,
57 |     datasets: [
58 |       {
59 |         label: metric,
60 |         data: value.map((val) => +(val * 100).toFixed(2)),
61 |         borderColor: '#3AD48F',
62 |         backgroundColor: '#1E8A5A',
63 |       },
64 |     ],
65 |   };
66 | 
67 |   return (
68 |     <div
69 |       className="flex flex-col h-auto w-1/2 items-center justify-center p-8"
70 |       id={id}
71 |     >
72 |       <p className="text-lg text-center dark:text-kalegreen-300">{metric}</p>
73 |       <Line data={data} />
74 |     </div>
75 |     // <LineChart
76 |     //   width={730}
77 |     //   height={250}
78 |     //   data={data}
79 |     //   margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
80 |     // >
81 |     //   <CartesianGrid strokeDasharray="3 3" />
82 |     //   <XAxis dataKey="time" />
83 |     //   <YAxis />
84 |     //   <Tooltip />
85 |     //   <Legend />
86 |     //   <Line type="monotone" dataKey="%" stroke="#8884d8" />
87 |     // </LineChart>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/client/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | import { RootState, useAppDispatch } from '../slices/store';
  2 | import React from 'react';
  3 | import { useSelector } from 'react-redux';
  4 | import { Link } from 'react-router-dom';
  5 | import { toggleSidebar } from '../slices/uiSlice';
  6 | import { logout } from '../slices/userSlice';
  7 | import { useNavigate } from 'react-router-dom';
  8 | type NavBarProps = {
  9 |   title: string;
 10 |   to: string;
 11 | };
 12 | export default function NavBar({ title, to }: NavBarProps) {
 13 |   const isSidebarOpen = useSelector(
 14 |     (state: RootState) => state.ui.isSidebarOpen
 15 |   );
 16 |   const navigate = useNavigate();
 17 |   const logOutHandler = () => {
 18 |     dispatch(logout());
 19 |     navigate('/signin');
 20 |   };
 21 |   const dispatch = useAppDispatch();
 22 | 
 23 |   return (
 24 |     <nav className="z-auto border-zinc-200 bg-zinc-50 dark:bg-zinc-950 dark:border-zinc-700">
 25 |       <div className="max-w-screen-xl flex flex-wrap items-center justify-start p-0 m-0">
 26 |         <button
 27 |           type="button"
 28 |           id="nav-button"
 29 |           className="my-2 z-10 text-kalegreen-700 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 dark:text-kalegreen-400 focus:outline-none dark:focus:bg-zinc-700"
 30 |           aria-controls="drawer-navigation"
 31 |           onClick={() => dispatch(toggleSidebar())}
 32 |         >
 33 |           <svg
 34 |             className="w-5 h-5"
 35 |             aria-hidden="true"
 36 |             xmlns="http://www.w3.org/2000/svg"
 37 |             fill="none"
 38 |             viewBox="0 0 17 14"
 39 |           >
 40 |             <path
 41 |               stroke="currentColor"
 42 |               strokeLinecap="round"
 43 |               strokeLinejoin="round"
 44 |               strokeWidth="2"
 45 |               d="M1 1h15M1 7h15M1 13h15"
 46 |             />
 47 |           </svg>
 48 |         </button>
 49 | 
 50 |         <Link
 51 |           to={to}
 52 |           className="flex items-center space-x-3 m-5 rtl:space-x-reverse"
 53 |         >
 54 |           <span className="z-10 self-center text-lg whitespace-nowrap dark:text-zinc-300">
 55 |             {title !== 'Home' ? title : ''}
 56 |           </span>
 57 |         </Link>
 58 | 
 59 |         <div
 60 |           id="drawer-navigation"
 61 |           className={`fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform duration-700 ${
 62 |             isSidebarOpen ? '' : '-translate-x-full'
 63 |           } bg-white dark:bg-zinc-900`}
 64 |           tabIndex={-1}
 65 |           aria-labelledby="drawer-navigation-label"
 66 |         >
 67 |           <button
 68 |             type="button"
 69 |             id="nav-close-button"
 70 |             data-drawer-hide="drawer-navigation"
 71 |             aria-controls="drawer-navigation"
 72 |             className="text-zinc-400 bg-transparent hover:bg-zinc-200 hover:text-zinc-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-zinc-600 dark:hover:text-white"
 73 |             onClick={() => dispatch(toggleSidebar())}
 74 |           >
 75 |             <svg
 76 |               aria-hidden="true"
 77 |               className="w-5 h-5"
 78 |               fill="currentColor"
 79 |               viewBox="0 0 20 20"
 80 |               xmlns="http://www.w3.org/2000/svg"
 81 |             >
 82 |               <path
 83 |                 fillRule="evenodd"
 84 |                 d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 85 |                 clipRule="evenodd"
 86 |               ></path>
 87 |             </svg>
 88 |             <span className="sr-only">Close menu</span>
 89 |           </button>
 90 |           <div className="py-5 overflow-y-auto">
 91 |             <ul className="space-y-2 text-sm">
 92 |               <li>
 93 |                 <Link
 94 |                   to="/welcome"
 95 |                   id="welcome-nav-btn"
 96 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
 97 |                   onClick={() => dispatch(toggleSidebar())}
 98 |                 >
 99 |                   <svg
100 |                     xmlns="http://www.w3.org/2000/svg"
101 |                     fill="none"
102 |                     viewBox="0 0 24 24"
103 |                     strokeWidth={1.5}
104 |                     stroke="currentColor"
105 |                     className="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
106 |                   >
107 |                     <path
108 |                       strokeLinecap="round"
109 |                       strokeLinejoin="round"
110 |                       d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
111 |                     />
112 |                   </svg>
113 | 
114 |                   <span className="ms-3">Home</span>
115 |                 </Link>
116 |               </li>
117 |               <li>
118 |                 <Link
119 |                   to="/dashboard"
120 |                   id="dashboard-nav-btn"
121 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
122 |                   onClick={() => dispatch(toggleSidebar())}
123 |                 >
124 |                   <svg
125 |                     xmlns="http://www.w3.org/2000/svg"
126 |                     fill="none"
127 |                     viewBox="0 0 24 24"
128 |                     strokeWidth={1.5}
129 |                     stroke="currentColor"
130 |                     className="w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
131 |                   >
132 |                     <path
133 |                       strokeLinecap="round"
134 |                       strokeLinejoin="round"
135 |                       d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z"
136 |                     />
137 |                     <path
138 |                       strokeLinecap="round"
139 |                       strokeLinejoin="round"
140 |                       d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z"
141 |                     />
142 |                   </svg>
143 | 
144 |                   <span className="ms-3">Dashboard</span>
145 |                 </Link>
146 |               </li>
147 |               <li>
148 |                 <Link
149 |                   to="/history"
150 |                   id="history-nav-btn"
151 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
152 |                   onClick={() => dispatch(toggleSidebar())}
153 |                 >
154 |                   <svg
155 |                     xmlns="http://www.w3.org/2000/svg"
156 |                     fill="none"
157 |                     viewBox="0 0 24 24"
158 |                     strokeWidth={1.5}
159 |                     stroke="currentColor"
160 |                     className="flex-shrink-0 w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
161 |                   >
162 |                     <path
163 |                       strokeLinecap="round"
164 |                       strokeLinejoin="round"
165 |                       d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
166 |                     />
167 |                   </svg>
168 | 
169 |                   <span className="flex-1 ms-3 whitespace-nowrap">History</span>
170 |                 </Link>
171 |               </li>
172 |               <li>
173 |                 <Link
174 |                   to="/signin"
175 |                   id="signin-nav-btn"
176 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
177 |                   onClick={() => dispatch(toggleSidebar())}
178 |                 >
179 |                   <svg
180 |                     xmlns="http://www.w3.org/2000/svg"
181 |                     fill="none"
182 |                     viewBox="0 0 24 24"
183 |                     strokeWidth={1.5}
184 |                     stroke="currentColor"
185 |                     className="flex-shrink-0 w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
186 |                   >
187 |                     <path
188 |                       strokeLinecap="round"
189 |                       strokeLinejoin="round"
190 |                       d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25"
191 |                     />
192 |                   </svg>
193 | 
194 |                   <span className="flex-1 ms-3 whitespace-nowrap">Sign In</span>
195 |                 </Link>
196 |               </li>
197 |               <li>
198 |                 <Link
199 |                   to="/signup"
200 |                   id="signup-nav-btn"
201 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
202 |                   onClick={() => dispatch(toggleSidebar())}
203 |                 >
204 |                   <svg
205 |                     xmlns="http://www.w3.org/2000/svg"
206 |                     fill="none"
207 |                     viewBox="0 0 24 24"
208 |                     strokeWidth={1.5}
209 |                     stroke="currentColor"
210 |                     className="flex-shrink-0 w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
211 |                   >
212 |                     <path
213 |                       strokeLinecap="round"
214 |                       strokeLinejoin="round"
215 |                       d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
216 |                     />
217 |                   </svg>
218 | 
219 |                   <span className="flex-1 ms-3 whitespace-nowrap">Sign Up</span>
220 |                 </Link>
221 |               </li>
222 |               <li>
223 |                 <Link
224 |                   to="/"
225 |                   className="flex items-center p-2 text-zinc-900 rounded-lg dark:text-zinc-300 hover:bg-kalegreen-100 dark:hover:bg-zinc-700 group"
226 |                   onClick={() => {
227 |                     dispatch(toggleSidebar());
228 |                     logOutHandler();
229 |                   }}
230 |                 >
231 |                   <svg
232 |                     className="flex-shrink-0 w-5 h-5 text-zinc-500 transition duration-75 dark:text-zinc-400 group-hover:text-kalegreen-600 dark:group-hover:text-white"
233 |                     aria-hidden="true"
234 |                     xmlns="http://www.w3.org/2000/svg"
235 |                     fill="none"
236 |                     strokeWidth={1.5}
237 |                     viewBox="0 0 24 24"
238 |                   >
239 |                     <path
240 |                       stroke="currentColor"
241 |                       strokeLinecap="round"
242 |                       strokeLinejoin="round"
243 |                       d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
244 |                     />
245 |                   </svg>
246 | 
247 |                   <span className="flex-1 ms-3 whitespace-nowrap">Log Out</span>
248 |                 </Link>
249 |               </li>
250 |             </ul>
251 |           </div>
252 |         </div>
253 |       </div>
254 |     </nav>
255 |   );
256 | }
257 | 


--------------------------------------------------------------------------------
/client/components/SnapshotButton.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Snapshot } from '../slices/snapshotsApi';
 3 | 
 4 | type SnapshotButtonProps = {
 5 |   currentData: Snapshot;
 6 |   handleClick: (arg: Snapshot) => void;
 7 | };
 8 | 
 9 | export default function SnapshotButton({
10 |   handleClick,
11 |   currentData,
12 | }: SnapshotButtonProps) {
13 |   return (
14 |     <button
15 |       id="snapshot"
16 |       onClick={() => handleClick(currentData)}
17 |       className="text-sm text-white dark:text-kalegreen-400"
18 |     >
19 |       Save Snapshot
20 |       <svg
21 |         xmlns="http://www.w3.org/2000/svg"
22 |         fill="#ffffff"
23 |         viewBox="0 0 24 24"
24 |         strokeWidth="1.5"
25 |         stroke="currentColor"
26 |         className="w-6 h-6"
27 |       >
28 |         <path
29 |           strokeLinecap="round"
30 |           strokeLinejoin="round"
31 |           d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
32 |         />
33 |       </svg>
34 |     </button>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/client/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './stylesheets/styles.css';
 3 | import { Provider } from 'react-redux';
 4 | import { createRoot } from 'react-dom/client';
 5 | import store from './slices/store';
 6 | import App from './App';
 7 | 
 8 | const rootElement = createRoot(document.getElementById('root'));
 9 | rootElement.render(
10 |   <Provider store={store}>
11 |     <div>
12 |       <App />
13 |     </div>
14 |   </Provider>
15 | );
16 | 


--------------------------------------------------------------------------------
/client/pages/Dashboard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { useSelector, useDispatch } from 'react-redux';
 3 | import { RootState } from '../slices/store';
 4 | import NavBar from '../components/Navbar';
 5 | import { Snapshot, useSendSnapshotsMutation } from '../slices/snapshotsApi';
 6 | import { useGrabMetricsMutation } from '../slices/metricsApi';
 7 | import SnapshotButton from '../components/SnapshotButton';
 8 | import ChartTable from '../components/ChartTable';
 9 | 
10 | export default function Dashboard() {
11 |   const url = useSelector((state: RootState) => state.ui.urlInput);
12 |   const podName = useSelector((state: RootState) => state.ui.nodeNameInput);
13 |   const grabUserInfo = useSelector((state: RootState) => state.user.userData);
14 |   const [grabMetrics, { data: currentData, error, isLoading }] =
15 |     useGrabMetricsMutation({
16 |       fixedCacheKey: 'current-metric-data',
17 |     });
18 | 
19 |   const [createSnapshot] = useSendSnapshotsMutation({
20 |     fixedCacheKey: 'last-snapshot-data',
21 |   });
22 | 
23 |   useEffect(() => {
24 |     const interval = setInterval(() => {
25 |       grabMetrics({ url, podName });
26 |     }, 30000);
27 |     return () => clearInterval(interval);
28 |   }, []);
29 | 
30 |   function handleClick(data: Snapshot) {
31 |     try {
32 |       const response = createSnapshot(data);
33 |       console.log('data created!', response);
34 |     } catch (error) {
35 |       console.log('error saving data:', error);
36 |     }
37 |   }
38 | 
39 |   return (
40 |     <>
41 |       <NavBar title="Dashboard" to="/dashboard" />
42 |       {isLoading ? (
43 |         <div className="text-zinc-200">Data loading...</div>
44 |       ) : currentData ? (
45 |         <>
46 |           <div className="max-w-screen-xl flex flex-wrap items-start justify-between mx-20 my-8">
47 |             <p className="text-lg text-center dark:text-kalegreen-400">
48 |               Cluster URL:{' '}
49 |               <p className="inline-block text-lg text-center dark:text-zinc-300">
50 |                 {url}
51 |               </p>
52 |             </p>
53 |             <div className="flex flex-col h-32 w-60 items-center justify-center">
54 |               <p className="text-lg text-center dark:text-kalegreen-300">
55 |                 Name of GPU
56 |               </p>
57 |               <p className="font-serif text-xl text-center h-full p-3 dark:text-zinc-300">
58 |                 NVIDIA GeForce RTX 3080
59 |               </p>
60 |             </div>
61 |             <div className="flex flex-col h-32 w-60 items-center justify-center">
62 |               <p className="text-lg text-center dark:text-kalegreen-300">
63 |                 Driver Version
64 |               </p>
65 |               <p className="font-serif text-xl text-center h-full p-3 dark:text-zinc-300">
66 |                 465.19
67 |               </p>
68 |             </div>
69 |             <SnapshotButton
70 |               handleClick={handleClick}
71 |               currentData={{ ...currentData, user: grabUserInfo.id }}
72 |             />
73 |           </div>
74 | 
75 |           <ChartTable metrics={currentData.metrics} />
76 |         </>
77 |       ) : null}
78 |     </>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/client/pages/History.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import {
  4 |   useDeleteSnapshotsMutation,
  5 |   useGetSnapshotsQuery,
  6 | } from '../slices/snapshotsApi';
  7 | import Navbar from '../components/Navbar';
  8 | import { useSelector } from 'react-redux';
  9 | import { RootState } from '../slices/store';
 10 | 
 11 | export default function History() {
 12 |   const userData = useSelector((state: RootState) => state.user.userData);
 13 | 
 14 |   const {
 15 |     data: snapShots,
 16 |     error,
 17 |     isLoading,
 18 |   } = useGetSnapshotsQuery(userData.id);
 19 | 
 20 |   const [
 21 |     deleteSnapshots, // This is the mutation trigger
 22 |     { data: deleteSnapshot, isLoading: isDeleting }, // This is the destructured mutation result
 23 |   ] = useDeleteSnapshotsMutation();
 24 | 
 25 |   const handleDelete = (id: string) => {
 26 |     deleteSnapshots(id);
 27 |     if (!isDeleting) console.log('Deleted:', deleteSnapshot);
 28 |   };
 29 | 
 30 |   const dataArr = [];
 31 |   if (snapShots) {
 32 |     console.log(snapShots);
 33 |     for (let i = 0; i < snapShots.length; i++) {
 34 |       dataArr.push(
 35 |         <tr className="bg-white border-b dark:bg-zinc-800 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-600">
 36 |           <td className="w-4 p-4">
 37 |             <div className="flex items-center">
 38 |               <input
 39 |                 id={`checkbox-table-search-${i + 1}`}
 40 |                 type="checkbox"
 41 |                 className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 rounded focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
 42 |               />
 43 |               <label htmlFor="checkbox-table-search-1" className="sr-only">
 44 |                 checkbox
 45 |               </label>
 46 |             </div>
 47 |           </td>
 48 |           <th
 49 |             scope="row"
 50 |             className="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap dark:text-white"
 51 |           >
 52 |             <Link to={`/history/${snapShots[i]._id}`}>{snapShots[i]._id}</Link>
 53 |           </th>
 54 | 
 55 |           <td className="px-6 py-4">pod</td>
 56 |           <td className="px-6 py-4">{snapShots[i].podName}</td>
 57 |           <td className="px-6 py-4">{snapShots[i].date}</td>
 58 |           <td className="px-6 py-4">
 59 |             <button
 60 |               className="font-medium text-rose-600 dark:text-rose-500 hover:underline"
 61 |               onClick={() => handleDelete(snapShots[i]._id)}
 62 |             >
 63 |               Delete
 64 |             </button>
 65 |           </td>
 66 |         </tr>
 67 |       );
 68 |     }
 69 |   }
 70 | 
 71 |   return (
 72 |     <div>
 73 |       <Navbar title="History" to="/history" />
 74 |       <div className="mx-32 my-10 sm:mx-10">
 75 |         <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
 76 |           <div className="flex flex-column sm:flex-row flex-wrap space-y-4 sm:space-y-0 items-center justify-between pb-4">
 77 |             <div>
 78 |               <button
 79 |                 id="dropdownRadioButton"
 80 |                 data-dropdown-toggle="dropdownRadio"
 81 |                 className="inline-flex items-center text-zinc-500 bg-white border border-zinc-300 focus:outline-none hover:bg-zinc-100 focus:ring-4 focus:ring-zinc-100 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:focus:ring-zinc-700"
 82 |                 type="button"
 83 |               >
 84 |                 <svg
 85 |                   className="w-3 h-3 text-zinc-500 dark:text-zinc-400 me-3"
 86 |                   aria-hidden="true"
 87 |                   xmlns="http://www.w3.org/2000/svg"
 88 |                   fill="currentColor"
 89 |                   viewBox="0 0 20 20"
 90 |                 >
 91 |                   <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z" />
 92 |                 </svg>
 93 |                 Last 30 days
 94 |                 <svg
 95 |                   className="w-2.5 h-2.5 ms-2.5"
 96 |                   aria-hidden="true"
 97 |                   xmlns="http://www.w3.org/2000/svg"
 98 |                   fill="none"
 99 |                   viewBox="0 0 10 6"
100 |                 >
101 |                   <path
102 |                     stroke="currentColor"
103 |                     strokeLinecap="round"
104 |                     strokeLinejoin="round"
105 |                     strokeWidth="2"
106 |                     d="m1 1 4 4 4-4"
107 |                   />
108 |                 </svg>
109 |               </button>
110 |               {/* <!-- Dropdown menu --> */}
111 |               <div
112 |                 id="dropdownRadio"
113 |                 className="z-10 hidden w-48 bg-white divide-y divide-zinc-100 rounded-lg shadow dark:bg-zinc-700 dark:divide-zinc-600"
114 |                 data-popper-reference-hidden=""
115 |                 data-popper-escaped=""
116 |                 data-popper-placement="top"
117 |                 style={{
118 |                   position: 'absolute',
119 |                   inset: 'auto auto 0px 0px',
120 |                   margin: ' 0px',
121 |                   transform: 'translate3d(522.5px, 3847.5px, 0px)',
122 |                 }}
123 |               >
124 |                 <ul
125 |                   className="p-3 space-y-1 text-sm text-zinc-700 dark:text-zinc-200"
126 |                   aria-labelledby="dropdownRadioButton"
127 |                 >
128 |                   <li>
129 |                     <div className="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
130 |                       <input
131 |                         id="filter-radio-example-1"
132 |                         type="radio"
133 |                         value=""
134 |                         name="filter-radio"
135 |                         className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
136 |                       />
137 |                       <label
138 |                         htmlFor="filter-radio-example-1"
139 |                         className="w-full ms-2 text-sm font-medium text-zinc-900 rounded dark:text-zinc-300"
140 |                       >
141 |                         Last day
142 |                       </label>
143 |                     </div>
144 |                   </li>
145 |                   <li>
146 |                     <div className="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
147 |                       <input
148 |                         id="filter-radio-example-2"
149 |                         type="radio"
150 |                         value=""
151 |                         name="filter-radio"
152 |                         className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
153 |                       />
154 |                       <label
155 |                         htmlFor="filter-radio-example-2"
156 |                         className="w-full ms-2 text-sm font-medium text-zinc-900 rounded dark:text-zinc-300"
157 |                       >
158 |                         Last 7 days
159 |                       </label>
160 |                     </div>
161 |                   </li>
162 |                   <li>
163 |                     <div className="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
164 |                       <input
165 |                         id="filter-radio-example-3"
166 |                         type="radio"
167 |                         value=""
168 |                         name="filter-radio"
169 |                         className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
170 |                       />
171 |                       <label
172 |                         htmlFor="filter-radio-example-3"
173 |                         className="w-full ms-2 text-sm font-medium text-zinc-900 rounded dark:text-zinc-300"
174 |                       >
175 |                         Last 30 days
176 |                       </label>
177 |                     </div>
178 |                   </li>
179 |                   <li>
180 |                     <div className="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
181 |                       <input
182 |                         id="filter-radio-example-4"
183 |                         type="radio"
184 |                         value=""
185 |                         name="filter-radio"
186 |                         className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
187 |                       />
188 |                       <label
189 |                         htmlFor="filter-radio-example-4"
190 |                         className="w-full ms-2 text-sm font-medium text-zinc-900 rounded dark:text-zinc-300"
191 |                       >
192 |                         Last month
193 |                       </label>
194 |                     </div>
195 |                   </li>
196 |                   <li>
197 |                     <div className="flex items-center p-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-600">
198 |                       <input
199 |                         id="filter-radio-example-5"
200 |                         type="radio"
201 |                         value=""
202 |                         name="filter-radio"
203 |                         className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
204 |                       />
205 |                       <label
206 |                         htmlFor="filter-radio-example-5"
207 |                         className="w-full ms-2 text-sm font-medium text-zinc-900 rounded dark:text-zinc-300"
208 |                       >
209 |                         Last year
210 |                       </label>
211 |                     </div>
212 |                   </li>
213 |                 </ul>
214 |               </div>
215 |             </div>
216 |             <label htmlFor="table-search" className="sr-only">
217 |               Search
218 |             </label>
219 |             <div className="relative">
220 |               <div className="absolute inset-y-0 left-0 rtl:inset-r-0 rtl:right-0 flex items-center ps-3 pointer-events-none">
221 |                 <svg
222 |                   className="w-5 h-5 text-zinc-500 dark:text-zinc-400"
223 |                   aria-hidden="true"
224 |                   fill="currentColor"
225 |                   viewBox="0 0 20 20"
226 |                   xmlns="http://www.w3.org/2000/svg"
227 |                 >
228 |                   <path
229 |                     fillRule="evenodd"
230 |                     d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
231 |                     clipRule="evenodd"
232 |                   ></path>
233 |                 </svg>
234 |               </div>
235 |               <input
236 |                 type="text"
237 |                 id="table-search"
238 |                 className="block p-2 ps-10 text-sm text-zinc-900 border border-zinc-300 rounded-lg w-80 bg-zinc-50 focus:ring-kalegreen-500 focus:border-kalegreen-500 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-kalegreen-500 dark:focus:border-kalegreen-500"
239 |                 placeholder="Search for items"
240 |               />
241 |             </div>
242 |           </div>
243 |           <table className="w-full text-sm text-left rtl:text-right text-zinc-500 dark:text-zinc-400">
244 |             <thead className="text-xs text-zinc-700 uppercase bg-zinc-50 dark:bg-zinc-700 dark:text-zinc-400">
245 |               <tr>
246 |                 <th scope="col" className="p-4">
247 |                   <div className="flex items-center">
248 |                     <input
249 |                       id="checkbox-all-search"
250 |                       type="checkbox"
251 |                       className="w-4 h-4 text-kalegreen-600 bg-zinc-100 border-zinc-300 rounded focus:ring-kalegreen-500 dark:focus:ring-kalegreen-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
252 |                     />
253 |                     <label htmlFor="checkbox-all-search" className="sr-only">
254 |                       checkbox
255 |                     </label>
256 |                   </div>
257 |                 </th>
258 |                 <th scope="col" className="px-6 py-3">
259 |                   Name
260 |                 </th>
261 |                 <th scope="col" className="px-6 py-3">
262 |                   Unit
263 |                 </th>
264 |                 <th scope="col" className="px-6 py-3">
265 |                   Unit Name
266 |                 </th>
267 |                 <th scope="col" className="px-6 py-3">
268 |                   Date
269 |                 </th>
270 |                 <th scope="col" className="px-6 py-3"></th>
271 |               </tr>
272 |             </thead>
273 |             <tbody>{dataArr}</tbody>
274 |           </table>
275 |         </div>
276 |       </div>
277 |     </div>
278 |   );
279 | }
280 | 


--------------------------------------------------------------------------------
/client/pages/NotFoundPage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | export default function NotFoundPage() {
 5 |   return (
 6 |     <section className="bg-white dark:bg-zinc-900">
 7 |       <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
 8 |         <div className="mx-auto max-w-screen-sm text-center">
 9 |           <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-kalegreen-600 dark:text-kalegreen-500">
10 |             404
11 |           </h1>
12 |           <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
13 |             Something's missing.
14 |           </p>
15 |           <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
16 |             Sorry, we can't find that page. You'll find lots to explore on the
17 |             home page.{' '}
18 |           </p>
19 |           <Link
20 |             to="/"
21 |             className="inline-flex text-white bg-kalegreen-600 hover:bg-kalegreen-800 focus:ring-4 focus:outline-none focus:ring-kalegreen-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-kalegreen-900 my-4"
22 |           >
23 |             Back to Homepage
24 |           </Link>
25 |         </div>
26 |       </div>
27 |     </section>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/client/pages/SignIn.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, ChangeEvent, FormEvent, useEffect } from 'react';
  2 | import { Link, useNavigate } from 'react-router-dom';
  3 | import { useAppDispatch } from '../slices/store';
  4 | import { useLoginMutation } from '../slices/userApi';
  5 | import { setCredential } from '../slices/userSlice';
  6 | import { VerifyData } from '../../types';
  7 | import NavBar from '../components/Navbar';
  8 | import { useSelector } from 'react-redux';
  9 | 
 10 | const SignInContainer = () => {
 11 |   const [signin] = useLoginMutation();
 12 |   const dispatch = useAppDispatch();
 13 |   const navigate = useNavigate();
 14 | 
 15 |   const [verifyData, setVerifyData] = useState<VerifyData>({
 16 |     email: '',
 17 |     password: '',
 18 |   });
 19 | 
 20 |   const [showPassword, setShowPassword] = useState(false);
 21 |   const [authError, setAuthError] = useState('');
 22 | 
 23 |   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 24 |     const { name, value } = event.target;
 25 | 
 26 |     setVerifyData({
 27 |       ...verifyData,
 28 |       [name]: value,
 29 |     });
 30 |     if (authError) setAuthError('');
 31 |   };
 32 | 
 33 |   const togglePasswordVisibility = () => {
 34 |     setShowPassword(!showPassword);
 35 |   };
 36 | 
 37 |   //this function sends the input to userSlice which calls the middleware function and dispatches the localStorage which we store specifically the ID and first name
 38 |   const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
 39 |     e.preventDefault();
 40 |     signin(verifyData)
 41 |       .unwrap()
 42 |       .then((res) => {
 43 |         const userData = {
 44 |           id: res._id,
 45 |           firstName: res.firstName,
 46 |         };
 47 |         dispatch(setCredential(userData));
 48 |         navigate('/welcome');
 49 |       })
 50 |       .catch((err) => {
 51 |         setAuthError(`Invalid log in credentials`);
 52 |       });
 53 |   };
 54 | 
 55 |   return (
 56 |     <>
 57 |       <NavBar title="Sign In" to="/signin" />
 58 |       <section className="bg-gray-50 dark:bg-zinc-950">
 59 |         <div className="flex items-center justify-center min-h-screen">
 60 |           <div
 61 |             className="py-8 px-4 mx-auto 
 62 |           max-w-screen-xl lg:py-16 grid lg:grid-cols-1 gap-8 lg:gap-16"
 63 |           >
 64 |             <div className="w-full lg:max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-zinc-800">
 65 |               <h2 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white text-center">
 66 |                 Sign in to kale
 67 |               </h2>
 68 |               {/* Form starts from here */}
 69 |               <form
 70 |                 id="signin-form"
 71 |                 onSubmit={submitHandler}
 72 |                 className="mt-8 space-y-6"
 73 |               >
 74 |                 <div>
 75 |                   <label
 76 |                     htmlFor="email"
 77 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 78 |                   >
 79 |                     Your email
 80 |                   </label>
 81 |                   <input
 82 |                     type="email"
 83 |                     name="email"
 84 |                     id="email-signin"
 85 |                     value={verifyData.email}
 86 |                     className={`bg-gray-50  ${
 87 |                       authError
 88 |                         ? '!border-2 !border-red-500'
 89 |                         : '!border !border-gray-300'
 90 |                     }   text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
 91 |                     placeholder="name@company.com"
 92 |                     required
 93 |                     onChange={handleChange}
 94 |                   />
 95 |                 </div>
 96 |                 <div>
 97 |                   <label
 98 |                     htmlFor="password"
 99 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
100 |                   >
101 |                     Your password
102 |                   </label>
103 |                   <input
104 |                     type={showPassword ? 'text' : 'password'}
105 |                     name="password"
106 |                     id="password-signin"
107 |                     placeholder="Password"
108 |                     className={`bg-gray-50  ${
109 |                       authError
110 |                         ? '!border-2 !border-red-500'
111 |                         : '!border !border-gray-300'
112 |                     } text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
113 |                     required
114 |                     value={verifyData.password}
115 |                     onChange={handleChange}
116 |                   />
117 |                   <p
118 |                     className="!mt-0 text-xs font-medium !text-white
119 |                     } dark:text-white"
120 |                   >
121 |                     Use your registered password to sign in. Ensure it's entered
122 |                     correctly, including upper and lower case letters, numbers,
123 |                     and symbols
124 |                   </p>
125 | 
126 |                   <div className="flex justify-between items-center !mt-0">
127 |                     <div className="!mt-0 text-left mt-0">
128 |                       {authError && (
129 |                         <p className="!mt-0 text-xs text-left font-medium text-red-500">
130 |                           {authError}
131 |                         </p>
132 |                       )}
133 |                     </div>
134 |                     <div className="!mt-0 text-right mt-2">
135 |                       <button
136 |                         type="button"
137 |                         className=" mb-2 text-sm font-medium text-gray-900 dark:text-white"
138 |                         onClick={togglePasswordVisibility}
139 |                       >
140 |                         {showPassword ? 'Hide password' : 'Show password'}
141 |                       </button>
142 |                     </div>
143 |                   </div>
144 |                 </div>
145 | 
146 |                 <button
147 |                   type="submit"
148 |                   id="signin-btn"
149 |                   className="w-full text-white bg-kalegreen-600 hover:bg-kalegreen-500 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-800"
150 |                 >
151 |                   Login to your account
152 |                 </button>
153 |                 <div className="text-sm font-light text-gray-500 dark:text-gray-400">
154 |                   Not registered yet?{' '}
155 |                   <Link
156 |                     to="/signup"
157 |                     className="text-blue-600 hover:underline dark:text-blue-500"
158 |                   >
159 |                     Create account
160 |                   </Link>
161 |                 </div>
162 |               </form>
163 |             </div>
164 |           </div>
165 |         </div>
166 |       </section>
167 |     </>
168 |   );
169 | };
170 | 
171 | export default SignInContainer;
172 | 


--------------------------------------------------------------------------------
/client/pages/Signup.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, ChangeEvent, FormEvent } from 'react';
  2 | import { useSignupMutation } from '../slices/userApi';
  3 | import { RootState } from '../slices/store';
  4 | 
  5 | import { Link, useNavigate } from 'react-router-dom';
  6 | import { setCredential } from '../slices/userSlice';
  7 | import { useSelector, useDispatch } from 'react-redux';
  8 | import { VerifyData } from '../../types';
  9 | import NavBar from '../components/Navbar';
 10 | const SignupContainer = () => {
 11 |   const [signup] = useSignupMutation();
 12 |   const dispatch = useDispatch();
 13 |   const navigate = useNavigate();
 14 | 
 15 |   const [showPassword, setShowPassword] = useState(false);
 16 |   const [loginData, setLoginData] = useState<VerifyData>({
 17 |     firstName: '',
 18 |     email: '',
 19 |     password: '',
 20 |     confirmPassword: '',
 21 |   });
 22 |   const togglePasswordVisibility = () => {
 23 |     setShowPassword(!showPassword);
 24 |   };
 25 |   const [emailError, setEmailError] = useState<string>('');
 26 |   const [passwordError, setPasswordError] = useState<string>('');
 27 |   const [confirmPasswordError, setConfirmPasswordError] = useState<string>('');
 28 | 
 29 |   //this enables us to see the user's input with every stroke
 30 |   const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
 31 |     const { name, value } = event.target;
 32 |     setLoginData((prevData) => ({
 33 |       ...prevData,
 34 |       [name]: value,
 35 |     }));
 36 |     if (name === 'email') {
 37 |       setEmailError('');
 38 |     }
 39 |     if (name === 'password') {
 40 |       const isValid = passwordPattern.test(value) || value.length === 0;
 41 | 
 42 |       setPasswordError(
 43 |         passwordPattern.test(value) ? '' : 'Password must meet requirements.'
 44 |       );
 45 |     } else if (name === 'confirmPassword') {
 46 |       setConfirmPasswordError(
 47 |         loginData.password !== value && value ? 'Passwords do not match.' : ''
 48 |       );
 49 |     }
 50 |   };
 51 |   const passwordPattern =
 52 |     /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z\d]).{8,}$/;
 53 |   const passwordValid =
 54 |     loginData.password.length === 0 || passwordPattern.test(loginData.password);
 55 | 
 56 |   const validatePassword = (
 57 |     password: string,
 58 |     confirmPassword: string
 59 |   ): boolean => {
 60 |     setPasswordError('');
 61 |     setConfirmPasswordError('');
 62 | 
 63 |     if (!passwordPattern.test(password)) {
 64 |       setPasswordError(
 65 |         'Password must be at least 8 characters long, including uppercase and lowercase letters, a number, and a special character.'
 66 |       );
 67 |       return false;
 68 |     } else if (password !== confirmPassword) {
 69 |       setConfirmPasswordError('Passwords do not match.');
 70 |       return false;
 71 |     }
 72 |     return true;
 73 |   };
 74 | 
 75 |   //ensures both password inputs are complex enough, sends the data to the backend, and sets our localStorage using dispatch
 76 |   const submitHandler = async (
 77 |     e: React.FormEvent<HTMLFormElement>
 78 |   ): Promise<void> => {
 79 |     e.preventDefault();
 80 | 
 81 |     if (!validatePassword(loginData.password, loginData.confirmPassword)) {
 82 |       console.error(
 83 |         'The passwords do not match or do not meet the complexity requirements.'
 84 |       );
 85 |       return;
 86 |     }
 87 | 
 88 |     try {
 89 |       const res = await signup(loginData).unwrap();
 90 |       dispatch(setCredential({ id: res._id, firstName: res.firstName }));
 91 |       navigate('/welcome');
 92 |       navigate('/welcome');
 93 |     } catch (err) {
 94 |       if (err.status === 400 && err.data.includes('exist')) {
 95 |         setEmailError('Email address already taken');
 96 |       } else {
 97 |         console.error(err);
 98 |       }
 99 |     }
100 |   };
101 |   return (
102 |     <>
103 |       <NavBar title="Sign Up" to="/signup" />
104 |       <section className="bg-gray-50 dark:bg-zinc-950">
105 |         <div className="flex items-center justify-center min-h-screen">
106 |           <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
107 |             <div className="flex flex-col justify-center space-y-6">
108 |               <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 text-center md:text-5xl lg:text-6xl dark:text-white">
109 |                 Optimizing Efficiency in AI/ML: Minimizing Costs and Resource
110 |                 Use{' '}
111 |               </h1>
112 |               <p className="mb-6 text-center text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">
113 |                 Here at Kale we leverage your unleashed talent, technology, and
114 |                 innovation to help improve flow of communication.
115 |               </p>
116 |             </div>
117 |             <div className="w-full lg:max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-zinc-800">
118 |               <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white text-center">
119 |                 Create an account
120 |               </h1>
121 | 
122 |               {/* Form starts from here */}
123 |               <form
124 |                 id="signup-form"
125 |                 onSubmit={submitHandler}
126 |                 className="space-y-4 md:space-y-6"
127 |               >
128 |                 <div>
129 |                   <label
130 |                     htmlFor="firstName"
131 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
132 |                   >
133 |                     Your First Name
134 |                   </label>
135 |                   <input
136 |                     type="firstName"
137 |                     name="firstName"
138 |                     id="first-name-signup"
139 |                     className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
140 |                     placeholder="First Name"
141 |                     required
142 |                     value={loginData.firstName}
143 |                     onChange={handleChange}
144 |                   />
145 |                 </div>
146 |                 <div>
147 |                   <label
148 |                     htmlFor="email"
149 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
150 |                   >
151 |                     Your email
152 |                   </label>
153 |                   <input
154 |                     type="email"
155 |                     name="email"
156 |                     id="email-signup"
157 |                     className={`bg-gray-50  ${
158 |                       emailError
159 |                         ? '!border-2 !border-red-500'
160 |                         : '!border !border-gray-300'
161 |                     } text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`}
162 |                     placeholder="name@company.com"
163 |                     required
164 |                     value={loginData.email}
165 |                     onChange={handleChange}
166 |                   />
167 |                   {emailError && (
168 |                     <p className="text-xs text-left font-medium text-red-500">
169 |                       {emailError}
170 |                     </p>
171 |                   )}
172 |                 </div>
173 |                 <div>
174 |                   <label
175 |                     htmlFor="password"
176 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
177 |                   >
178 |                     Password
179 |                   </label>
180 |                   <input
181 |                     type={showPassword ? 'text' : 'password'}
182 |                     name="password"
183 |                     id="password-signup"
184 |                     placeholder="Password"
185 |                     className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
186 |                     value={loginData.password}
187 |                     required
188 |                     onChange={handleChange}
189 |                   />
190 |                 </div>
191 | 
192 |                 <p
193 |                   className={`!mt-0 text-xs font-medium ${
194 |                     loginData.password.length > 0 && !passwordValid
195 |                       ? '!text-red-500'
196 |                       : '!text-white'
197 |                   } dark:text-white`}
198 |                 >
199 |                   Create a strong password with at least 8 characters with upper
200 |                   and lower case letters, numbers, and symbols.
201 |                 </p>
202 | 
203 |                 <div>
204 |                   <label
205 |                     htmlFor="confirm-password"
206 |                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
207 |                   >
208 |                     Confirm password
209 |                   </label>
210 |                   <input
211 |                     type={showPassword ? 'text' : 'password'}
212 |                     name="confirmPassword"
213 |                     id="confirm-password-signup"
214 |                     placeholder="Confirm"
215 |                     className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
216 |                     required
217 |                     onChange={handleChange}
218 |                   />
219 |                 </div>
220 |                 <div className="flex justify-between items-center !mt-0">
221 |                   <div className="!mt-0 text-left mt-0">
222 |                     {confirmPasswordError && (
223 |                       <p className="!mt-0 text-xs text-left font-medium text-red-500">
224 |                         {confirmPasswordError}
225 |                       </p>
226 |                     )}
227 |                   </div>
228 |                   <div className="!mt-0 text-right mt-0">
229 |                     <button
230 |                       type="button"
231 |                       className=" mb-2 text-sm font-medium text-gray-900 dark:text-white"
232 |                       onClick={togglePasswordVisibility}
233 |                     >
234 |                       {showPassword ? 'Hide password' : 'Show password'}
235 |                     </button>
236 |                   </div>
237 |                 </div>
238 |                 <button
239 |                   type="submit"
240 |                   id="create-account-btn"
241 |                   className="w-full text-white bg-kalegreen-600 hover:bg-kalegreen-500 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-800"
242 |                 >
243 |                   Create an account
244 |                 </button>
245 |                 <p className="text-sm font-light text-gray-500 dark:text-gray-400">
246 |                   Already have an account?{' '}
247 |                   <Link
248 |                     to="/signin"
249 |                     className="text-blue-600 hover:underline dark:text-blue-500"
250 |                   >
251 |                     Login here
252 |                   </Link>
253 |                 </p>
254 |               </form>
255 |             </div>
256 |           </div>
257 |         </div>
258 |       </section>
259 |     </>
260 |   );
261 | };
262 | 
263 | export default SignupContainer;
264 | 


--------------------------------------------------------------------------------
/client/pages/SnapshotPage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import NavBar from '../components/Navbar';
 3 | import { useParams } from 'react-router-dom';
 4 | import { useSelector } from 'react-redux';
 5 | import { RootState } from '../slices/store';
 6 | import {
 7 |   useGetSnapshotState,
 8 |   useGetOneSnapshotQuery,
 9 |   useDeleteSnapshotsMutation,
10 | } from '../slices/snapshotsApi';
11 | import { Snapshot } from '../slices/snapshotsApi';
12 | import ChartTable from '../components/ChartTable';
13 | 
14 | export default function SnapshotPage() {
15 |   const { snapshotId } = useParams();
16 |   const urlShow = useSelector((state: RootState) => state.ui.urlInput);
17 | 
18 |   const [
19 |     deleteSnapshots, // This is the mutation trigger
20 |     { data: deleteSnapshot, isLoading: isDeleting }, // This is the destructured mutation result
21 |   ] = useDeleteSnapshotsMutation();
22 | 
23 |   const { data: currSnapshot, error: snapshotError } =
24 |     useGetOneSnapshotQuery(snapshotId);
25 | 
26 |   const handleDelete = (id: string) => {
27 |     deleteSnapshots(id);
28 |     if (!isDeleting) console.log('Deleted:', deleteSnapshot);
29 |   };
30 | 
31 |   return (
32 |     <>
33 |       <NavBar title={`History: ${snapshotId}`} to={`/history/${snapshotId}`} />
34 |       <div className="max-w-screen-xl flex flex-wrap items-start justify-between mx-20 my-8">
35 |         <p className="text-lg text-center dark:text-kalegreen-400">
36 |           Cluster URL:{' '}
37 |           <span className="inline-block text-lg text-center dark:text-zinc-300">
38 |             {urlShow}
39 |           </span>
40 |         </p>
41 | 
42 |         <div className="flex flex-col h-32 w-60 items-center justify-center">
43 |           <p className="text-lg text-center dark:text-kalegreen-300">
44 |             Name of GPU
45 |           </p>
46 |           <p className="font-serif text-xl text-center h-full p-3 dark:text-zinc-300">
47 |             NVIDIA GeForce RTX 3080
48 |           </p>
49 |         </div>
50 |         <div className="flex flex-col h-32 w-60 items-center justify-center">
51 |           <p className="text-lg text-center dark:text-kalegreen-300">
52 |             Driver Version
53 |           </p>
54 |           <p className="font-serif text-xl text-center h-full p-3 dark:text-zinc-300">
55 |             465.19
56 |           </p>
57 |         </div>
58 | 
59 |         <button
60 |           className="inline-block rounded-md bg-rose-600 px-3.5 py-2.5 text-sm text-white shadow-sm hover:bg-rose-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-800"
61 |           onClick={() => handleDelete(snapshotId)}
62 |         >
63 |           Delete Snapshot
64 |         </button>
65 |       </div>
66 |       {currSnapshot ? (
67 |         <ChartTable metrics={currSnapshot.metrics} />
68 |       ) : (
69 |         <p>Data Loading</p>
70 |       )}
71 |     </>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/client/pages/SplashPage.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from 'react';
  2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  3 | import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
  4 | import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
  5 | import { Link } from 'react-router-dom';
  6 | import { useSelector } from 'react-redux';
  7 | import { RootState, useAppDispatch } from '../slices/store';
  8 | import { setGifUrl, setActiveDemo } from '../slices/uiSlice';
  9 | import { useDispatch } from 'react-redux';
 10 | 
 11 | interface TeamMember {
 12 |   name: string;
 13 |   role: string;
 14 |   imageUrl: string;
 15 |   linkedInUrl: string;
 16 |   email: string;
 17 | }
 18 | 
 19 | //team member pictures
 20 | const ismaelImageURL: string = './public/Assets/Ismael-Headshot.jpg';
 21 | const soniaImageURL: string = './public/Assets/Sonia-Headshot.jpg';
 22 | const jinImageURL: string = './public/Assets/Jin-Headshot.jpg';
 23 | const jeffImageURL: string = './public/Assets/Jeff-Headshot.jpg';
 24 | 
 25 | //team member linkedIn
 26 | const soniaLinkedInUrl: string = 'https://www.linkedin.com/in/soheunhan/';
 27 | const jinLinkedInUrl: string =
 28 |   'https://www.linkedin.com/in/jinseong-nam-8b6815212/';
 29 | const jeffLinkedInUrl: string =
 30 |   'https://www.linkedin.com/in/jeffrey-chao-9479142a/';
 31 | const ismaelLinkedInUrl: string =
 32 |   'https://www.linkedin.com/in/ismael-boussatta-2493b2126/';
 33 | 
 34 | //team member email
 35 | const soniaEmail: string = 'sonia.han@hey.com';
 36 | const jinEmail: string = 'jjjinnam@gmail.com';
 37 | const ismaelEmail: string = 'boussatta.ismael@gmail.com';
 38 | const jeffEmail: string = 'jeffplv@gmail.com';
 39 | 
 40 | const teamMembers: TeamMember[] = [
 41 |   {
 42 |     name: 'Sonia Han',
 43 |     role: 'Software Engineer',
 44 |     imageUrl: soniaImageURL,
 45 |     linkedInUrl: soniaLinkedInUrl,
 46 |     email: soniaEmail,
 47 |   },
 48 |   {
 49 |     name: 'Jeffrey Chao',
 50 |     role: 'Software Engineer',
 51 |     imageUrl: jeffImageURL,
 52 |     linkedInUrl: jeffLinkedInUrl,
 53 |     email: jeffEmail,
 54 |   },
 55 |   {
 56 |     name: 'Jinseong Nam',
 57 |     role: 'Software Engineer',
 58 |     imageUrl: jinImageURL,
 59 |     linkedInUrl: jinLinkedInUrl,
 60 |     email: jinEmail,
 61 |   },
 62 |   {
 63 |     name: 'Ismael Boussatta',
 64 |     role: 'Software Engineer',
 65 |     imageUrl: ismaelImageURL,
 66 |     linkedInUrl: ismaelLinkedInUrl,
 67 |     email: ismaelEmail,
 68 |   },
 69 | ];
 70 | 
 71 | // demo GIF url
 72 | const autoRefresh = './public/Assets/demo/auto_refresh.gif';
 73 | const inputUrl = './public/Assets/demo/input_url.gif';
 74 | const saveSnapshot = './public/Assets/demo/save_snapshot.gif';
 75 | const signUp = './public/Assets/demo/signup.gif';
 76 | 
 77 | export default function SplashPage() {
 78 |   const demoGifUrl = useSelector((state: RootState) => state.ui.demoGifUrl);
 79 |   const activeDemo = useSelector((state: RootState) => state.ui.activeDemo);
 80 |   const whatIsK8sSectionRef = useRef<HTMLDivElement>(null);
 81 |   const handleScrollToSection = () => {
 82 |     whatIsK8sSectionRef.current?.scrollIntoView({
 83 |       behavior: 'smooth',
 84 |       block: 'start',
 85 |     });
 86 |   };
 87 | 
 88 |   const dispatch = useDispatch();
 89 | 
 90 |   const handleListClick = (list: string, gifUrl: string): void => {
 91 |     dispatch(setGifUrl(gifUrl));
 92 | 
 93 |     dispatch(setActiveDemo(list));
 94 |   };
 95 | 
 96 |   return (
 97 |     <>
 98 |       <header className="fixed top-0 left-0 w-full z-10">
 99 |         <div className="container mx-auto flex items-center justify-between py-2 px-8 w-full">
100 |           <a href="/" className="logo">
101 |             <img
102 |               className="ml-[-8]"
103 |               src="./public/Assets/kale-logo.png"
104 |               alt="kale Logo"
105 |               width="50"
106 |               height="50"
107 |             />
108 |           </a>
109 |           <div className="continaer flex justify-between items-center">
110 |             <Link
111 |               to="/signup"
112 |               id="sign-up-button-homepage"
113 |               className="rounded-md bg-kalegreen-600 px-3.5 py-2.5 text-sm text-zinc-200 shadow-sm hover:bg-kalegreen-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kalegreen-600"
114 |             >
115 |               Sign up
116 |             </Link>
117 |             <div className="text-kalegreen-600 pl-4">
118 |               <Link to="/signin" id="sign-in-button-homepage">
119 |                 Sign in
120 |               </Link>
121 |             </div>
122 |           </div>
123 |         </div>
124 |       </header>
125 | 
126 |       <div className="relative isolate px-6 pt-14 lg:px-8">
127 |         <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
128 |           <div
129 |             className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#3AD48F] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
130 |             style={{
131 |               clipPath:
132 |                 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
133 |             }}
134 |           />
135 |         </div>
136 |         <div className="h-full sm:h-2/4 mx-auto max-w-3xl py-28 sm:py-6 lg:py-20">
137 |           <div className="hidden sm:mb-8 sm:flex sm:justify-center"></div>
138 |           <div className="text-center">
139 |             <h1 className="text-4xl font-bold tracking-tight text-zinc-200 sm:text-6xl m-8">
140 |               Welcome to <p className="inline-block text-kalegreen-400">kale</p>
141 |               , your new favorite Kubernetes autoscaling tool
142 |             </h1>
143 |             <p className="text-center text-zinc-400 flex flex-row justify-center mb-16">
144 |               Deploying your Machine Learning models on Kubernetes just got
145 |               easier
146 |             </p>
147 |             <button
148 |               className="rounded-md bg-kalegreen-600 px-3.5 py-2.5 text-sm text-zinc-200 shadow-sm hover:bg-kalegreen-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kalegreen-600"
149 |               onClick={() => handleScrollToSection()}
150 |             >
151 |               Learn more
152 |             </button>
153 |           </div>
154 |         </div>
155 | 
156 |         <div
157 |           className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
158 |           aria-hidden="true"
159 |         >
160 |           <div
161 |             className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#3AD48F] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
162 |             style={{
163 |               clipPath:
164 |                 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
165 |             }}
166 |           />
167 |         </div>
168 | 
169 |         <section
170 |           className="text-zinc-200 grid grid-cols-2 gap-8 max-h-screen items-center pt-24"
171 |           ref={whatIsK8sSectionRef}
172 |         >
173 |           <div className="text-content p-6 rounded-lg shadow-md">
174 |             <h2 className="text-center font-bold text-4xl dark:text-zinc-200 flex flex-row justify-center mb-7">
175 |               {' '}
176 |               What’s the problem with K8s?
177 |             </h2>
178 |             <h3 className="text-center text-2xl text-zinc-300 flex flex-row justify-center font-medium my-4">
179 |               {' '}
180 |               Horizontal Pod Autoscaler
181 |             </h3>
182 |             <p className="text-center text-zinc-400 flex flex-row justify-center mb-9">
183 |               It's a feature in K8s that automatically scales the number of pods
184 |               based on observed metrics. This helps ensure your application has
185 |               the resources it needs to handle varying workloads without manual
186 |               intervention.
187 |             </p>
188 |             <h3 className="text-center text-2xl text-zinc-300 flex flex-row justify-center font-medium my-4">
189 |               {' '}
190 |               CPU and Memory usage
191 |             </h3>
192 |             <p className="text-center text-zinc-400 flex flex-row justify-center mb-9">
193 |               HPA primarily focuses on resource-based metrics like CPU and
194 |               memory usage.
195 |             </p>
196 |             <h3 className="text-center text-2xl text-zinc-300 flex flex-row justify-center font-medium my-4">
197 |               {' '}
198 |               GPU for Machine Learning
199 |             </h3>
200 |             <p className="text-center text-zinc-400 flex flex-row justify-center mb-9">
201 |               A critical aspect of ML training processes is the utilization of
202 |               GPUs to facilitate the simultaneous execution of computationally
203 |               intensive tasks. While Kubernetes offers robust out-of-the-box
204 |               autoscaling functionality, it currently lacks native support for
205 |               scaling based on GPU metrics.
206 |             </p>
207 |           </div>
208 |           <div className="image-container ">
209 |             <img
210 |               className="rounded-lg h-4/5"
211 |               src="./public/Assets/GPU-image.jpg"
212 |               alt="GPU Image"
213 |             />
214 |           </div>
215 |         </section>
216 | 
217 |         <div className="">
218 |           <section className="items-center pt-24">
219 |             <div className="flex flex-col items-center justify-center dark:text-zinc-200 text-content p-6 rounded-lg">
220 |               <h2 className="text-center font-extrabold text-5xl flex flex-row justify-center mb-3">
221 |                 The Solution:{' '}
222 |                 <span className="text-kalegreen-600 ml-3">kale</span>
223 |               </h2>
224 |               <p className="text-center zinc-400 text-2xl w-7/12">
225 |                 A monitoring and autoscaling tool designed for machine learning
226 |                 workloads on Kubernetes to provide more intelligent scaling
227 |                 decisions.
228 |               </p>
229 |             </div>
230 |           </section>
231 | 
232 |           <section className="text-zinc-200 grid grid-cols-2 gap-8 items-center pt-16">
233 |             <div className="text-content bg-zinc-900 p-6 rounded-lg shadow-md ml-3">
234 |               <h2 className="text-center font-extrabold text-4xl font-extrabold dark:text-zinc-200 flex flex-row justify-center m-6 ">
235 |                 Demo
236 |               </h2>
237 |               <p className="text-small text-center dark:text-zinc-400 m-4">
238 |                 Click any links below to see the product demo.
239 |               </p>
240 |               <ul className="text-xl text-zinc-400 flex flex-col items-center px-8 text-center">
241 |                 <li
242 |                   className={`my-6 hover:text-kalegreen-300 ${
243 |                     activeDemo === '1' ? 'text-kalegreen-300' : null
244 |                   }`}
245 |                 >
246 |                   <button onClick={() => handleListClick('1', signUp)}>
247 |                     📝 Sign up for kale.
248 |                   </button>
249 |                 </li>
250 |                 <li
251 |                   className={`my-6 hover:text-kalegreen-300 ${
252 |                     activeDemo === '2' ? 'text-kalegreen-300' : null
253 |                   }`}
254 |                 >
255 |                   <button onClick={() => handleListClick('2', inputUrl)}>
256 |                     📈 Enter Prometheus Server URL and pod name you would like
257 |                     to monitor.
258 |                   </button>
259 |                 </li>
260 |                 <li
261 |                   className={`my-6 hover:text-kalegreen-300 ${
262 |                     activeDemo === '3' ? 'text-kalegreen-300' : null
263 |                   }`}
264 |                 >
265 |                   <button onClick={() => handleListClick('3', saveSnapshot)}>
266 |                     📸 Take a snapshot of your pod metrics and view your saved
267 |                     snapshots in your 'History' tab. Click on a saved snapshot
268 |                     to open up its metrics.
269 |                   </button>
270 |                 </li>
271 |                 <li
272 |                   className={`my-6 hover:text-kalegreen-300 ${
273 |                     activeDemo === '4' ? 'text-kalegreen-300' : null
274 |                   }`}
275 |                 >
276 |                   <button onClick={() => handleListClick('4', autoRefresh)}>
277 |                     🔄 Dashboard will update metrics every 30 seconds
278 |                   </button>
279 |                 </li>
280 |               </ul>
281 |             </div>
282 |             <div className="image-container mr-3">
283 |               <img className="rounded-lg" src={demoGifUrl} alt="demo gif" />
284 |             </div>
285 |           </section>
286 |         </div>
287 |         <div className="container flex flex-col justify-center items-center">
288 |           <h2 className="text-5xl font-extrabold dark:text-zinc-200 flex flex-row justify-center mb-7 mt-44">
289 |             {' '}
290 |             Meet The Team
291 |           </h2>
292 |           <div className="flex max-w-4xl flex-row flex-wrap justify-between p-6">
293 |             {teamMembers.map((member) => (
294 |               <div
295 |                 key={member.name}
296 |                 className="dark:text-zinc-200 team-member flex flex-col items-center justify-center gap-1 m-4"
297 |               >
298 |                 <img
299 |                   src={member.imageUrl}
300 |                   alt={member.name}
301 |                   width="100"
302 |                   height="100"
303 |                   className="rounded-full w-24 h-24 object-cover"
304 |                 />
305 |                 <h3 className="text-xl">{member.name}</h3>
306 |                 <p className="dark:text-zinc-400">{member.role}</p>
307 |                 <div className="flex space-x-2 mt-2">
308 |                   <a
309 |                     href={member.linkedInUrl}
310 |                     target="_blank"
311 |                     rel="noopener noreferror"
312 |                     className="text-blue-500 hover:text-blue-700"
313 |                   >
314 |                     <FontAwesomeIcon icon={faLinkedin} size="xl" />
315 |                   </a>
316 |                   <a
317 |                     href={`mailto:${member.email}`}
318 |                     className="text-gray-500 hover:text-gray-700"
319 |                   >
320 |                     <FontAwesomeIcon icon={faEnvelope} size="xl" />
321 |                   </a>
322 |                 </div>
323 |               </div>
324 |             ))}
325 |           </div>
326 |         </div>
327 |       </div>
328 |     </>
329 |   );
330 | }
331 | 


--------------------------------------------------------------------------------
/client/pages/WelcomePage.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ClusterInput from '../components/ClusterInput';
  3 | import NavBar from '../components/Navbar';
  4 | import { Link } from 'react-router-dom';
  5 | import { useGrabMetricsMutation } from '../slices/metricsApi';
  6 | import { RootState } from '../slices/store';
  7 | import { useSelector, useDispatch } from 'react-redux';
  8 | import { saveUrl, saveNodeName } from '../slices/uiSlice';
  9 | 
 10 | type handleClickArg = { url: string; podName: string };
 11 | 
 12 | export default function WelcomePage() {
 13 |   const urlShow = useSelector((state: RootState) => state.ui.urlInput);
 14 |   const podName = useSelector((state: RootState) => state.ui.nodeNameInput);
 15 |   //allows us to get access to the localStorage data(the curr user's id and name)
 16 |   const userDataShow = useSelector((state: RootState) => state.user.userData);
 17 | 
 18 |   const [grabMetrics, result] = useGrabMetricsMutation({
 19 |     fixedCacheKey: 'current-metric-data',
 20 |   });
 21 | 
 22 |   const dispatch = useDispatch();
 23 | 
 24 |   // handle the 'Go' button click event to fetch the metrics data with provided url
 25 |   function handleClick({ url, podName }: handleClickArg) {
 26 |     try {
 27 |       const response = grabMetrics({ url, podName });
 28 |     } catch (error) {
 29 |       console.log('error creating data:', error);
 30 |     }
 31 |   }
 32 | 
 33 |   // Update url as user types
 34 |   function handleUrlChange(e: any) {
 35 |     dispatch(saveUrl(e.target.value));
 36 |   }
 37 |   // Update node name as user types
 38 |   function handlePodNameChange(e: any) {
 39 |     dispatch(saveNodeName(e.target.value));
 40 |   }
 41 | 
 42 |   return (
 43 |     <>
 44 |       <nav className=" flex justify-between px-8 py-2 items-center w-full ">
 45 |         <NavBar title="Home" to="/" />
 46 |         <Link to="/welcome">
 47 |           <img
 48 |             className="ml-[-8]"
 49 |             src="./public/Assets/kale-logo.png"
 50 |             alt="kale Logo"
 51 |             width="50"
 52 |             height="50"
 53 |           />
 54 |         </Link>
 55 |       </nav>
 56 |       <div className="relative h-5/6 isolate pt-24">
 57 |         <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-96">
 58 |           <div
 59 |             className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#3AD48F] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
 60 |             style={{
 61 |               clipPath:
 62 |                 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
 63 |             }}
 64 |           />
 65 |         </div>
 66 |         <div className="h-full mx-auto max-w-3xl py-28 sm:py-32 lg:py-20 text-left">
 67 |           <h1 className="text-4xl font-bold tracking-tight text-zinc-200 sm:text-6xl">
 68 |             Hello,{' '}
 69 |             <p className="inline-block text-kalegreen-400">
 70 |               {userDataShow ? userDataShow.firstName : 'Random Hacker'}
 71 |             </p>
 72 |           </h1>
 73 |           <p className="mt-6 text-lg leading-8 text-zinc-400">
 74 |             Please enter your cluster's Prometheus URL and the name of the pod
 75 |             you want to monitor*.
 76 |           </p>
 77 |           <ClusterInput
 78 |             handleUrlChange={handleUrlChange}
 79 |             handlePodNameChange={handlePodNameChange}
 80 |             handleClick={handleClick}
 81 |             url={urlShow}
 82 |             podName={podName}
 83 |           />
 84 |           <p className="mt-6 text-xs leading-8 text-zinc-400">
 85 |             *Proof of Concept: Data is currently based on <b>CPU metrics</b>.
 86 |             More comprehensive metrics are in development.
 87 |           </p>
 88 |         </div>
 89 |         <div
 90 |           className="absolute h-80 inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
 91 |           aria-hidden="true"
 92 |         >
 93 |           <div
 94 |             className="relative h-full left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#3AD48F] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
 95 |             style={{
 96 |               clipPath:
 97 |                 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
 98 |             }}
 99 |           />
100 |         </div>
101 |       </div>
102 |     </>
103 |   );
104 | }
105 | 


--------------------------------------------------------------------------------
/client/public/Assets/GPU image.jpg:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | ZoneId=3
3 | ReferrerUrl=https://unsplash.com/
4 | HostUrl=https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=rafael-pol-6b5uqlWabB0-unsplash.jpg
5 | 


--------------------------------------------------------------------------------
/client/public/Assets/GPU-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/GPU-image.jpg


--------------------------------------------------------------------------------
/client/public/Assets/Ismael LinkedIn Headshot.jpg:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | ZoneId=3
3 | ReferrerUrl=https://www.linkedin.com/
4 | HostUrl=https://media.licdn.com/dms/image/C4E03AQEfrxu7_oqcxg/profile-displayphoto-shrink_800_800/0/1657887037194?e=1705536000&v=beta&t=U9hKEv5beudYhMSe0N9FrHoYnVwIS7CtCmYC9rN22hU
5 | 


--------------------------------------------------------------------------------
/client/public/Assets/Ismael-Headshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/Ismael-Headshot.jpg


--------------------------------------------------------------------------------
/client/public/Assets/Jeff Headshot.jpg:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | ZoneId=3
3 | HostUrl=https://files.slack.com/files-pri/T06MCELUAK1-F06SC8YQDHT/download/image_from_ios.jpg?origin_team=T06MCELUAK1
4 | 


--------------------------------------------------------------------------------
/client/public/Assets/Jeff-Headshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/Jeff-Headshot.jpg


--------------------------------------------------------------------------------
/client/public/Assets/Jin Headshot.jpg:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | LastWriterPackageFamilyName=Microsoft.Windows.Photos_8wekyb3d8bbwe
3 | ZoneId=3
4 | 


--------------------------------------------------------------------------------
/client/public/Assets/Jin-Headshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/Jin-Headshot.jpg


--------------------------------------------------------------------------------
/client/public/Assets/Sonia-Headshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/Sonia-Headshot.jpg


--------------------------------------------------------------------------------
/client/public/Assets/demo/auto_refresh.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/demo/auto_refresh.gif


--------------------------------------------------------------------------------
/client/public/Assets/demo/input_url.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/demo/input_url.gif


--------------------------------------------------------------------------------
/client/public/Assets/demo/save_snapshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/demo/save_snapshot.gif


--------------------------------------------------------------------------------
/client/public/Assets/demo/signup.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/demo/signup.gif


--------------------------------------------------------------------------------
/client/public/Assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/favicon.png


--------------------------------------------------------------------------------
/client/public/Assets/kale logo.png:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | ZoneId=3
3 | HostUrl=https://files.slack.com/files-pri/T06MCELUAK1-F06S3SLRTAQ/download/group_3.png?origin_team=T06MCELUAK1
4 | 


--------------------------------------------------------------------------------
/client/public/Assets/kale-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/kale-logo.png


--------------------------------------------------------------------------------
/client/public/Assets/kubernetes illustration.jpg:Zone.Identifier:
--------------------------------------------------------------------------------
1 | [ZoneTransfer]
2 | ZoneId=3
3 | ReferrerUrl=https://unsplash.com/
4 | HostUrl=https://images.unsplash.com/photo-1667372459567-3853510dd5ce?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=growtika-pr5lUMgocTs-unsplash.jpg
5 | 


--------------------------------------------------------------------------------
/client/public/Assets/kubernetes-illustration.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/kubernetes-illustration.jpg


--------------------------------------------------------------------------------
/client/public/Assets/welcome-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/kale/96c07cded4f93f0743580ce8e2bcd31ca6856b40/client/public/Assets/welcome-page.png


--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="dark">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" type="image/png" href="public/Assets/favicon.png" />
 6 |     <link href="../dist/styles.css" rel="stylesheet" />
 7 | 
 8 |     <title>Kale: Kubernetes GPU Monitoring and Autoscaling tool</title>
 9 |   </head>
10 |   <body class="bg-gray-50 dark:bg-zinc-950">
11 |     <div id="root"></div>
12 |     <script src="../dist/bundle.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/client/slices/metricsApi.ts:
--------------------------------------------------------------------------------
 1 | import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 2 | import { ApiData } from '../../types.d';
 3 | 
 4 | type queryArg = { url: string; podName: string };
 5 | 
 6 | // API communication with server
 7 | export const metricsApiSlice = createApi({
 8 |   reducerPath: 'metricsApi',
 9 |   baseQuery: fetchBaseQuery({ baseUrl: '/' }),
10 |   endpoints: (builder) => ({
11 |     grabMetrics: builder.mutation<ApiData, queryArg>({
12 |       query: ({ url, podName }: queryArg) => ({
13 |         url: 'api',
14 |         method: 'POST',
15 |         body: { url, podName },
16 |       }),
17 |     }),
18 |   }),
19 | });
20 | 
21 | export const {
22 |   useGrabMetricsMutation, //sending a post request using url
23 | } = metricsApiSlice;
24 | 


--------------------------------------------------------------------------------
/client/slices/snapshotsApi.ts:
--------------------------------------------------------------------------------
 1 | import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 2 | import { ApiData } from '../../types.d';
 3 | 
 4 | export interface Snapshot extends ApiData {
 5 |   user: string;
 6 | }
 7 | 
 8 | export interface SnapshotWithId extends ApiData {
 9 |   user: string;
10 |   _id: string;
11 | }
12 | 
13 | // database communication with server
14 | export const snapshotsApiSlice = createApi({
15 |   reducerPath: 'snapshotsApi',
16 |   baseQuery: fetchBaseQuery({ baseUrl: '/snapshots' }),
17 |   endpoints: (builder) => ({
18 |     getSnapshots: builder.query<SnapshotWithId[], void>({
19 |       query: (userId) => ({ url: `/${userId}` }),
20 |     }),
21 |     sendSnapshots: builder.mutation<Snapshot, Snapshot>({
22 |       query: (data) => ({
23 |         url: '/',
24 |         method: 'POST',
25 |         body: {
26 |           snapshot: data,
27 |         },
28 |       }),
29 |     }),
30 |     updateSnapshots: builder.mutation<Snapshot, Partial<Snapshot>>({
31 |       query: (newSnapshotData: Partial<Snapshot>) => {
32 |         return {
33 |           url: `${newSnapshotData.user}`,
34 |           method: 'PATCH',
35 |           body: newSnapshotData,
36 |         };
37 |       },
38 |     }),
39 |     getOneSnapshot: builder.query<SnapshotWithId, string>({
40 |       query: (id) => ({ url: `/one/${id}`, method: 'GET' }),
41 |     }),
42 |     deleteSnapshots: builder.mutation<SnapshotWithId, string>({
43 |       query: (id) => ({
44 |         url: `${id}`,
45 |         method: 'DELETE',
46 |       }),
47 |     }),
48 |   }),
49 | });
50 | 
51 | export const useGetSnapshotState =
52 |   snapshotsApiSlice.endpoints.getSnapshots.useQueryState;
53 | export const useSnapshotQuerySubscription =
54 |   snapshotsApiSlice.endpoints.getSnapshots.useQuerySubscription;
55 | 
56 | export const {
57 |   useGetSnapshotsQuery, // (for history page)
58 |   useSendSnapshotsMutation, // send post request to post snapshot
59 |   useUpdateSnapshotsMutation, //STRETCH: update the snapshot
60 |   useGetOneSnapshotQuery,
61 |   useDeleteSnapshotsMutation, //deleting the snapshot
62 | } = snapshotsApiSlice;
63 | 


--------------------------------------------------------------------------------
/client/slices/store.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit';
 2 | import { metricsApiSlice } from './metricsApi';
 3 | import { snapshotsApiSlice } from './snapshotsApi';
 4 | import { uiSlice } from './uiSlice';
 5 | import { useDispatch } from 'react-redux';
 6 | import { userApi } from './userApi';
 7 | import { userSlice } from './userSlice';
 8 | const store = configureStore({
 9 |   reducer: {
10 |     metricsApi: metricsApiSlice.reducer,
11 |     snapshotsApi: snapshotsApiSlice.reducer,
12 |     ui: uiSlice.reducer,
13 |     userApi: userApi.reducer,
14 |     user: userSlice.reducer,
15 |   },
16 |   middleware: (getDefaultMiddleware) =>
17 |     getDefaultMiddleware()
18 |       .concat(metricsApiSlice.middleware)
19 |       .concat(snapshotsApiSlice.middleware)
20 |       .concat(userApi.middleware),
21 | });
22 | 
23 | export default store;
24 | 
25 | export type RootState = ReturnType<typeof store.getState>;
26 | export type AppDispatch = typeof store.dispatch;
27 | export const useAppDispatch: () => AppDispatch = useDispatch;
28 | 


--------------------------------------------------------------------------------
/client/slices/uiSlice.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   CreateSliceOptions,
 3 |   createSlice,
 4 |   PayloadAction,
 5 | } from '@reduxjs/toolkit';
 6 | 
 7 | type UiState = {
 8 |   urlInput: string;
 9 |   nodeNameInput: string;
10 |   isSidebarOpen: boolean;
11 |   demoGifUrl: string;
12 |   activeDemo: string;
13 | };
14 | const initialState: UiState = {
15 |   urlInput: '',
16 |   nodeNameInput: '',
17 |   isSidebarOpen: false,
18 |   demoGifUrl: './public/Assets/demo/signup.gif',
19 |   activeDemo: '1',
20 | };
21 | 
22 | export const uiSlice = createSlice({
23 |   name: 'ui',
24 |   initialState,
25 |   reducers: {
26 |     toggleSidebar(state) {
27 |       state.isSidebarOpen = !state.isSidebarOpen;
28 |     },
29 |     saveUrl: (state, action: PayloadAction<string>) => {
30 |       state.urlInput = action.payload;
31 |     },
32 |     saveNodeName: (state, action: PayloadAction<string>) => {
33 |       state.nodeNameInput = action.payload;
34 |     },
35 |     setGifUrl: (state, action: PayloadAction<string>) => {
36 |       state.demoGifUrl = action.payload;
37 |     },
38 |     setActiveDemo: (state, action: PayloadAction<string>) => {
39 |       state.activeDemo = action.payload;
40 |     },
41 |   },
42 | });
43 | 
44 | export const {
45 |   toggleSidebar,
46 |   saveUrl,
47 |   saveNodeName,
48 |   setGifUrl,
49 |   setActiveDemo,
50 | } = uiSlice.actions;
51 | 


--------------------------------------------------------------------------------
/client/slices/userApi.ts:
--------------------------------------------------------------------------------
 1 | import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 2 | 
 3 | export const userApi = createApi({
 4 |   reducerPath: 'userApi',
 5 |   baseQuery: fetchBaseQuery({ baseUrl: '/user' }),
 6 |   endpoints: (builder) => ({
 7 |     signup: builder.mutation({
 8 |       query: (data) => ({
 9 |         url: '/signup',
10 |         method: 'POST',
11 |         body: data,
12 |       }),
13 |     }),
14 |     login: builder.mutation({
15 |       query: (data) => ({
16 |         url: `/login`,
17 |         method: 'POST',
18 |         body: data,
19 |       }),
20 |     }),
21 |   }),
22 | });
23 | 
24 | export const { useLoginMutation, useSignupMutation } = userApi;
25 | 


--------------------------------------------------------------------------------
/client/slices/userSlice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 2 | import { UserState } from '../../types';
 3 | 
 4 | const initialState: UserState = {
 5 |   userData: localStorage.getItem('userData')
 6 |     ? JSON.parse(localStorage.getItem('userData'))
 7 |     : null,
 8 |   sessionData: [],
 9 | };
10 | 
11 | export const userSlice = createSlice({
12 |   name: 'user',
13 |   initialState,
14 |   reducers: {
15 |     setCredential: (state, action: PayloadAction<any>) => {
16 |       state.userData = action.payload;
17 |       localStorage.setItem('userData', JSON.stringify(action.payload));
18 |     },
19 |     logout: (state) => {
20 |       state.userData = null;
21 |       localStorage.clear();
22 |     },
23 |     updateSessionData: (state, action: PayloadAction<any>) => {
24 |       state.sessionData.push(action.payload);
25 |     },
26 |   },
27 | });
28 | export const { setCredential, logout, updateSessionData } = userSlice.actions;
29 | 


--------------------------------------------------------------------------------
/client/stylesheets/styles.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | 
6 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'cypress';
 2 | import { devServer } from '@cypress/webpack-dev-server';
 3 | 
 4 | export default defineConfig({
 5 |   e2e: {
 6 |     setupNodeEvents(on, config) {
 7 |       // implement node event listeners here
 8 |     },
 9 |   },
10 | 
11 |   component: {
12 |     devServer(devServerConfig) {
13 |       return devServer({
14 |         ...devServerConfig,
15 |         framework: 'react',
16 |         webpackConfig: require('./webpack.config.js'),
17 |       });
18 |     },
19 |   },
20 | });
21 | 


--------------------------------------------------------------------------------
/cypress/e2e/auth.cy.ts:
--------------------------------------------------------------------------------
  1 | describe('Authentication', () => {
  2 |   describe('Signup', () => {
  3 |     beforeEach(() => {
  4 |       cy.visit('http://localhost:8080');
  5 |     });
  6 |     it('signup form is visible', () => {
  7 |       cy.get('#sign-up-button-homepage').click();
  8 |       cy.get('#signup-form').should('be.visible');
  9 |     });
 10 |     it('successful create account', () => {
 11 |       cy.get('#sign-up-button-homepage').click();
 12 |       cy.fixture('users/secretUser.json').then((userInfo) => {
 13 |         cy.intercept('POST', '/user/signup').as('createUser');
 14 | 
 15 |         cy.get('#first-name-signup').type(userInfo.firstName);
 16 |         cy.get('#email-signup').type(userInfo.email);
 17 |         cy.get('#password-signup').type(userInfo.password);
 18 |         cy.get('#confirm-password-signup').type(userInfo.password);
 19 |         cy.get('#create-account-btn').click();
 20 | 
 21 |         cy.wait('@createUser').then((interception) => {
 22 |           expect(interception.response.body).to.have.property(
 23 |             'email',
 24 |             userInfo.email
 25 |           );
 26 |           expect(interception.response.body).to.have.property(
 27 |             'firstName',
 28 |             userInfo.firstName
 29 |           );
 30 |           expect(interception.response.statusCode).to.equal(200);
 31 |         });
 32 |       });
 33 |     });
 34 |     it('create account with existing email address', () => {
 35 |       cy.get('#sign-up-button-homepage').click();
 36 |       cy.fixture('users/secretUser.json').then((userInfo) => {
 37 |         cy.intercept('POST', '/user/signup').as('createUser');
 38 | 
 39 |         cy.get('#first-name-signup').type(userInfo.firstName);
 40 |         cy.get('#email-signup').type(userInfo.email);
 41 |         cy.get('#password-signup').type(userInfo.password);
 42 |         cy.get('#confirm-password-signup').type(userInfo.password);
 43 |         cy.get('#create-account-btn').click();
 44 | 
 45 |         cy.wait('@createUser').then((interception) => {
 46 |           expect(interception.response.body).to.include(
 47 |             'Username already exists. Please choose another username'
 48 |           );
 49 |           expect(interception.response.statusCode).to.equal(400);
 50 |         });
 51 |       });
 52 |     });
 53 |     it('Already have an account? Sign in', () => {
 54 |       cy.get('#sign-up-button-homepage').click();
 55 |       cy.contains('Login').click();
 56 |       cy.url().should('include', '/signin');
 57 |     });
 58 |   });
 59 | 
 60 |   describe('Signin', () => {
 61 |     beforeEach(() => {
 62 |       cy.visit('http://localhost:8080');
 63 |       cy.get('#sign-up-button-homepage').click();
 64 |       cy.get('#nav-button').click();
 65 |       cy.get('#signin-nav-btn').click();
 66 |     });
 67 |     it('signin form is visible', () => {
 68 |       cy.get('#signin-form').should('be.visible');
 69 |     });
 70 |     it('successful signin', () => {
 71 |       cy.fixture('users/secretUser.json').then((userInfo) => {
 72 |         cy.intercept('POST', '/user/login').as('signinUser');
 73 | 
 74 |         cy.get('#email-signin').type(userInfo.email);
 75 |         cy.get('#password-signin').type(userInfo.password);
 76 |         cy.get('#signin-btn').click();
 77 | 
 78 |         cy.wait('@signinUser').then((interception) => {
 79 |           expect(interception.response.statusCode).to.equal(200);
 80 |         });
 81 |       });
 82 |     });
 83 |     it('unsuccessful signin', () => {
 84 |       cy.fixture('users/secretUser.json').then((userInfo) => {
 85 |         cy.intercept('POST', '/user/login').as('signinUser');
 86 | 
 87 |         cy.get('#email-signin').type(userInfo.email);
 88 |         cy.get('#password-signin').type('wrongpassword');
 89 |         cy.get('#signin-btn').click();
 90 | 
 91 |         cy.wait('@signinUser').then((interception) => {
 92 |           expect(interception.response.body).to.include(
 93 |             'Invalid login credentials.'
 94 |           );
 95 |           expect(interception.response.statusCode).to.equal(401);
 96 |         });
 97 |       });
 98 |     });
 99 |     it('Not registered yet? Create account', () => {
100 |       cy.contains('Create account').click();
101 |       cy.url().should('include', '/signup');
102 |     });
103 |   });
104 | });
105 | 


--------------------------------------------------------------------------------
/cypress/e2e/dashboardPage.cy.ts:
--------------------------------------------------------------------------------
 1 | describe('The Dashboard Page', () => {
 2 |   const promURL = 'http://127.0.0.1:9090/';
 3 | 
 4 |   beforeEach(() => {
 5 |     cy.visit('http://localhost:8080/');
 6 |     cy.contains('Get started').click();
 7 | 
 8 |     cy.get('#url-input').type(promURL);
 9 |     cy.get('#go-button').click();
10 |   });
11 | 
12 |   it('contains /dashboard in the URL', () => {
13 |     cy.url().should('include', '/dashboard');
14 |   });
15 |   it('dashboard contains: Cluster URL, a line chart and a gauge chart', () => {
16 |     cy.contains('Dashboard');
17 |     cy.contains('Cluster URL: ' + promURL);
18 |     cy.get('#line-chart-0').should('be.visible');
19 |     cy.get('#gauge-chart-0').should('be.visible');
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/cypress/e2e/historyPage.cy.ts:
--------------------------------------------------------------------------------
 1 | describe('The History Page', () => {
 2 |   beforeEach(() => {
 3 |     cy.visit('http://localhost:8080/history');
 4 |     cy.get('#nav-button').click();
 5 |     cy.get('#history-nav-btn').click();
 6 |   });
 7 | 
 8 |   it('contains /history in the URL and a title "History"', () => {
 9 |     cy.url().should('include', '/history');
10 |     cy.contains('History');
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/cypress/e2e/navigation.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | describe('The Welcome Page', () => {
 4 |     
 5 |   beforeEach(() => {
 6 |     cy.visit('http://localhost:8080');
 7 |   });
 8 | 
 9 |   it('has a sidebar that opens and closes', () => {
10 |     cy.get('#nav-button').click();
11 |     cy.get('#drawer-navigation').should('be.visible');
12 | 
13 |     cy.get('#nav-close-button').click();
14 |     cy.get('#drawer-navigation').should('not.be.visible');
15 |   });
16 | 
17 |   it('dashboard sidebar button redirects to /dashboard', () => {
18 |     cy.get('#nav-button').click();
19 |     cy.get('#dashboard-nav-btn').click();
20 |     cy.url().should('include', '/dashboard');
21 |   });
22 |   it('history sidebar button redirects to /history', () => {
23 |     cy.get('#nav-button').click();
24 |     cy.get('#history-nav-btn').click();
25 |     cy.url().should('include', '/history');
26 |   });
27 |   it('signup sidebar button redirects to /signup', () => {
28 |     cy.get('#nav-button').click();
29 |     cy.get('#signup-nav-btn').click();
30 |     cy.url().should('include', '/signup');
31 |   });
32 |   it('signin sidebar button redirects to /signin', () => {
33 |     cy.get('#nav-button').click();
34 |     cy.get('#signin-nav-btn').click();
35 |     cy.url().should('include', '/signin');
36 |   });
37 | 
38 |   it("cy.go() - go back or forward in the browser's history", () => {
39 |     cy.get('#nav-button').click();
40 |     cy.get('#history-nav-btn').click();
41 |     cy.url().should('include', '/history');
42 | 
43 |     cy.go('back');
44 |     cy.url().should('not.include', 'navigation');
45 | 
46 |     cy.go('forward');
47 |     cy.url().should('include', '/history');
48 |   });
49 | 
50 |   it('cy.reload() - reload the page', () => {
51 |     cy.get('#nav-button').click();
52 |     cy.get('#history-nav-btn').click();
53 |     cy.url().should('include', '/history');
54 | 
55 |     cy.reload();
56 | 
57 |     cy.reload(true);
58 |   });
59 | });
60 | 


--------------------------------------------------------------------------------
/cypress/e2e/splashPage.cy.ts:
--------------------------------------------------------------------------------
 1 | describe('The Splash Page', () => {
 2 |   beforeEach(() => {
 3 |     cy.visit('http://localhost:8080');
 4 |   });
 5 | 
 6 |   it('has a title', () => {
 7 |     cy.contains('Welcome to kale');
 8 | 
 9 |     // cy.url().should('include', '/commands/actions');
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/cypress/e2e/welcomePage.cy.ts:
--------------------------------------------------------------------------------
 1 | describe('The Welcome Page', () => {
 2 |   const promURL = 'http://127.0.0.1:9090/';
 3 | 
 4 |   beforeEach(() => {
 5 |     cy.visit('http://localhost:8080');
 6 |     cy.get('#nav-button').click();
 7 |     cy.get('#welcome-nav-btn').click();
 8 |   });
 9 | 
10 |   it('has a title', () => {
11 |     cy.contains('Hello');
12 |   });
13 |   it('has a "Get started" button and input field shows up when clicked', () => {
14 |     cy.contains('Get started').click();
15 |     cy.get('#url-input').should('be.visible');
16 | 
17 |     cy.get('#url-input').type(promURL);
18 |     cy.get('#url-input').should('have.value', promURL);
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/cypress/support/commands.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | // ***********************************************
 3 | // This example commands.ts shows you how to
 4 | // create various custom commands and overwrite
 5 | // existing commands.
 6 | //
 7 | // For more comprehensive examples of custom
 8 | // commands please read more here:
 9 | // https://on.cypress.io/custom-commands
10 | // ***********************************************
11 | //
12 | //
13 | // -- This is a parent command --
14 | // Cypress.Commands.add('login', (email, password) => { ... })
15 | //
16 | //
17 | // -- This is a child command --
18 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19 | //
20 | //
21 | // -- This is a dual command --
22 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23 | //
24 | //
25 | // -- This will overwrite an existing command --
26 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27 | //
28 | // declare global {
29 | //   namespace Cypress {
30 | //     interface Chainable {
31 | //       login(email: string, password: string): Chainable<void>
32 | //       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33 | //       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34 | //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35 | //     }
36 | //   }
37 | // }
38 | 


--------------------------------------------------------------------------------
/cypress/support/component-index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <title>Components App</title>
 8 |   </head>
 9 |   <body>
10 |     <div data-cy-root></div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/cypress/support/component.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/component.ts is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 
22 | import { mount } from 'cypress/react18'
23 | 
24 | // Augment the Cypress namespace to include type definitions for
25 | // your custom command.
26 | // Alternatively, can be defined in cypress/support/component.d.ts
27 | // with a <reference path="./component" /> at the top of your spec.
28 | declare global {
29 |   namespace Cypress {
30 |     interface Chainable {
31 |       mount: typeof mount
32 |     }
33 |   }
34 | }
35 | 
36 | Cypress.Commands.add('mount', mount)
37 | 
38 | // Example use:
39 | // cy.mount(<MyComponent />)


--------------------------------------------------------------------------------
/cypress/support/e2e.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/e2e.ts is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kale",
 3 |   "version": "1.0.0",
 4 |   "description": "Kubernetes GPU monitoring and autoscaling tool for ML",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "cross-env NODE_ENV=production nodemon server/server.ts",
 9 |     "build": "cross-env NODE_ENV=production webpack",
10 |     "dev": "concurrently \"cross-env NODE_ENV=development webpack serve --open\" \"cross-env NODE_ENV=development nodemon server/server.ts\"",
11 |     "cypress:open": "cypress open"
12 |   },
13 |   "author": "Jeffrey Chao, Sonia Han, Ismael Boussatta, Jinseong Nam",
14 |   "license": "ISC",
15 |   "dependencies": {
16 |     "@fortawesome/fontawesome-svg-core": "^6.5.1",
17 |     "@fortawesome/free-brands-svg-icons": "^6.5.1",
18 |     "@fortawesome/free-solid-svg-icons": "^6.5.1",
19 |     "@fortawesome/react-fontawesome": "^0.2.0",
20 |     "@headlessui/react": "^1.7.18",
21 |     "@heroicons/react": "^2.1.3",
22 |     "@cypress/webpack-dev-server": "^3.7.4",
23 |     "@reduxjs/toolkit": "^2.2.1",
24 |     "@types/bcryptjs": "^2.4.6",
25 |     "@types/d3": "^7.4.3",
26 |     "@types/dotenv": "^8.2.0",
27 |     "@types/recharts": "^1.8.29",
28 |     "bcryptjs": "^2.4.3",
29 |     "chart.js": "^4.4.2",
30 |     "d3": "^7.9.0",
31 |     "dotenv": "^16.4.5",
32 |     "express": "^4.18.3",
33 |     "mongoose": "^8.2.2",
34 |     "node-fetch": "^2.6.1",
35 |     "react": "^18.2.0",
36 |     "react-chartjs-2": "^5.2.0",
37 |     "react-dom": "^18.2.0",
38 |     "react-redux": "^9.1.0",
39 |     "react-router-dom": "^6.22.3",
40 |     "recharts": "^2.12.3",
41 |     "redux": "^5.0.1"
42 |   },
43 |   "devDependencies": {
44 |     "@babel/core": "^7.24.0",
45 |     "@babel/preset-env": "^7.24.0",
46 |     "@babel/preset-react": "^7.23.3",
47 |     "@types/cypress": "^1.1.3",
48 |     "@types/express": "^4.17.21",
49 |     "@types/jest": "^29.5.12",
50 |     "@types/node": "^20.11.28",
51 |     "@types/react": "^18.2.66",
52 |     "@types/react-dom": "^18.2.22",
53 |     "@types/react-redux": "^7.1.33",
54 |     "autoprefixer": "^10.4.18",
55 |     "babel-loader": "^9.1.3",
56 |     "chai": "^5.1.0",
57 |     "concurrently": "^8.2.2",
58 |     "cross-env": "^7.0.3",
59 |     "css-loader": "^6.10.0",
60 |     "cypress": "^13.7.2",
61 |     "flowbite": "^2.3.0",
62 |     "flowbite-react": "^0.7.3",
63 |     "html-webpack-plugin": "^5.6.0",
64 |     "mini-css-extract-plugin": "^2.8.1",
65 |     "nodemon": "^3.1.0",
66 |     "postcss": "^8.4.36",
67 |     "postcss-cli": "^11.0.0",
68 |     "postcss-loader": "^8.1.1",
69 |     "sass": "^1.71.1",
70 |     "sass-loader": "^14.1.1",
71 |     "style-loader": "^3.3.4",
72 |     "tailwindcss": "^3.4.1",
73 |     "ts-loader": "^9.5.1",
74 |     "ts-node": "^10.9.2",
75 |     "typescript": "^5.4.3",
76 |     "webpack": "^5.91.0",
77 |     "webpack-cli": "^5.1.4",
78 |     "webpack-dev-server": "^5.0.4"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/server/Models/snapshotModel.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from 'mongoose';
 2 | const { Schema } = mongoose;
 3 | 
 4 | const snapshotSchema = new Schema({
 5 |   user: { type: Schema.Types.ObjectId, ref: 'User' },
 6 |   podName: String,
 7 |   date: { type: Date, default: Date.now() },
 8 |   metrics: {
 9 |     gpuUsage: {
10 |       metric: String,
11 |       time: [String],
12 |       value: [Number],
13 |     },
14 |     memoryUsage: {
15 |       metric: String,
16 |       time: [String],
17 |       value: [Number],
18 |     },
19 |   },
20 | });
21 | 
22 | const Snapshot = mongoose.model('Snapshot', snapshotSchema);
23 | 
24 | export default Snapshot;
25 | 


--------------------------------------------------------------------------------
/server/Models/userModel.ts:
--------------------------------------------------------------------------------
 1 | import dotenv from 'dotenv';
 2 | import bcrypt from 'bcryptjs';
 3 | import mongoose from 'mongoose';
 4 | 
 5 | const { Schema } = mongoose;
 6 | dotenv.config();
 7 | 
 8 | declare global {
 9 |   namespace NodeJS {
10 |     interface ProcessEnv {
11 |       [key: string]: string | undefined;
12 |       MONGODB_URI: string;
13 |     }
14 |   }
15 | }
16 | 
17 | interface UserType {
18 |   // Define an interface for user schema properties
19 |   email: string;
20 |   firstName: string;
21 |   password: string;
22 |   comparePassword(candidatePassword: string): Promise<boolean>;
23 | }
24 | 
25 | const SALT_WORK_FACTOR: number = 10; // Use number type for numeric constant
26 | 
27 | const myURI = process.env.MONGODB_URI;
28 | 
29 | try {
30 |   mongoose.connect(myURI);
31 |   console.log('connected to mongodb');
32 | } catch (error) {
33 |   console.log(error);
34 | }
35 | 
36 | const userSchema = new Schema<UserType>({
37 |   // Use generic type argument for UserType interface
38 |   email: { type: String, required: true, unique: true },
39 |   firstName: { type: String, required: true },
40 |   password: { type: String, required: true },
41 | });
42 | 
43 | userSchema.pre<UserType>('save', async function (next) {
44 |   const user = this as UserType; // Explicitly cast 'this' to UserType for property access
45 | 
46 |   try {
47 |     // Generate a salt
48 |     const salt = await bcrypt.genSalt(SALT_WORK_FACTOR);
49 | 
50 |     // Hash the password along with our new salt
51 |     const hash = await bcrypt.hash(user.password, salt);
52 | 
53 |     // Override the cleartext password with the hashed one
54 |     user.password = hash;
55 |     return next();
56 |   } catch (err) {
57 |     return next(err);
58 |   }
59 | });
60 | 
61 | userSchema.methods.comparePassword = async function (
62 |   candidatePassword: string
63 | ): Promise<boolean> {
64 |   try {
65 |     const isMatch = await bcrypt.compare(candidatePassword, this.password);
66 |     return isMatch;
67 |   } catch (err) {
68 |     throw err; // Or handle the error differently
69 |   }
70 | };
71 | 
72 | const User = mongoose.model('User', userSchema);
73 | 
74 | export default User;
75 | 


--------------------------------------------------------------------------------
/server/controllers/apiController.ts:
--------------------------------------------------------------------------------
 1 | import { Request, Response, NextFunction } from 'express';
 2 | import { ApiData, FetchResponseData, MetricsData } from '../../types';
 3 | 
 4 | const apiController = {
 5 |   gpuUsage: async (req: Request, res: Response, next: NextFunction) => {
 6 |     const podName = req.body.podName;
 7 | 
 8 |     const baseUrl = req.body.url.includes(`http://`)
 9 |       ? req.body.url.slice(7)
10 |       : req.body.url;
11 | 
12 |     if (!baseUrl || !podName) {
13 |       const errObj = {
14 |         status: 400,
15 |         message: { err: 'Your Prometheus URL or Pod Name was not provided' },
16 |       };
17 |       return next(errObj);
18 |     }
19 | 
20 |     // buliding PromQL query
21 |     const query = `container_cpu_usage_seconds_total{pod="${podName}", namespace="default"}[5m]`;
22 |     const encodedQuery = encodeURIComponent(query);
23 |     const apiUrl = `http://${baseUrl}/api/v1/query?query=${encodedQuery}`;
24 | 
25 |     try {
26 |       const response = await fetch(apiUrl);
27 |       const data: FetchResponseData = await response.json();
28 | 
29 |       const metricsValues: MetricsData = {
30 |         metric: 'GPU Usage',
31 |         time: [],
32 |         value: [],
33 |       };
34 | 
35 |       //-------- Total pod usage ------------
36 |       data.data.result[0].values.forEach(([time, value]) => {
37 |         let date = new Date(time * 1000);
38 |         let formattedTime = date.toLocaleTimeString('en-US', {
39 |           timeZone: 'America/New_York',
40 |           hour12: false,
41 |           hour: '2-digit',
42 |           minute: '2-digit',
43 |           second: '2-digit',
44 |         });
45 |         metricsValues.time.push(formattedTime);
46 |         metricsValues.value.push(Number(value));
47 |       });
48 | 
49 |       const formattedData: ApiData = {
50 |         podName: podName,
51 |         date: new Date().toLocaleDateString('en-CA', {
52 |           timeZone: 'America/New_York',
53 |         }),
54 |         metrics: {
55 |           gpuUsage: metricsValues,
56 |         },
57 |       };
58 | 
59 |       res.locals.gpuUsage = formattedData;
60 | 
61 |       return next();
62 |     } catch (error) {
63 |       const errObj = {
64 |         log: 'Error fetching GPU usage data: ' + error,
65 |         status: 500,
66 |         message: { err: 'Error fetching GPU usage data' },
67 |       };
68 |       return next(errObj);
69 |     }
70 |   },
71 | };
72 | 
73 | export default apiController;
74 | 


--------------------------------------------------------------------------------
/server/controllers/authController.ts:
--------------------------------------------------------------------------------
 1 | import { Request, Response, NextFunction } from 'express';
 2 | import User from '../Models/userModel';
 3 | 
 4 | const authController = {
 5 |   createUser: async (req: Request, res: Response, next: NextFunction) => {
 6 |     const { email, firstName, password } = req.body;
 7 | 
 8 |     try {
 9 |       const existingUser = await User.findOne({ email });
10 |       if (existingUser) {
11 |         return next({
12 |           status: 400,
13 |           log: 'Error in createUser middleware',
14 |           message: 'Username already exists. Please choose another username',
15 |         });
16 |       }
17 |       const newUser = await User.create({ email, firstName, password });
18 | 
19 |       res.locals.newUser = { firstName: newUser.firstName, _id: newUser._id };
20 | 
21 |       return next();
22 |     } catch (err) {
23 |       return next({
24 |         log: 'Error in createUser middleware: ' + err,
25 |         message: { err: 'An error occurred while creating user' },
26 |       });
27 |     }
28 |   },
29 | 
30 |   login: async (req: Request, res: Response, next: NextFunction) => {
31 |     let { email, password } = req.body;
32 |     if (!email || !password) {
33 |       return next({
34 |         status: 401, // Unauthorized
35 |         log: 'Error in login middleware',
36 |         message: 'Invalid username or password',
37 |       });
38 |     }
39 |     try {
40 |       const existingUser = await User.findOne({ email });
41 |       // console.log(existingUser);
42 |       if (!existingUser) {
43 |         return next({
44 |           status: 401, // Unauthorized
45 |           log: 'Error in login middleware',
46 |           message: 'Invalid username or password',
47 |         });
48 |       }
49 | 
50 |       if (typeof password === 'number') {
51 |         password = JSON.stringify(password);
52 |       }
53 | 
54 |       const valid = await existingUser.comparePassword(password);
55 |       if (!valid) {
56 |         return res
57 |           .status(401)
58 |           .json({ message: 'Invalid username or password' });
59 |       }
60 |       const { firstName, _id } = existingUser;
61 |       res.locals.user = { firstName, _id };
62 | 
63 |       return next();
64 |     } catch (err) {
65 |       return next({
66 |         log: 'Error in login middleware: ' + err,
67 |         message: { err: 'An error occurred while user login ' },
68 |       });
69 |     }
70 |   },
71 | };
72 | 
73 | export default authController;
74 | 


--------------------------------------------------------------------------------
/server/controllers/dbController.ts:
--------------------------------------------------------------------------------
  1 | import { Request, Response, NextFunction } from 'express';
  2 | import Snapshot from '../Models/snapshotModel';
  3 | 
  4 | const dbController = {
  5 |   getSnapshot: async (req: Request, res: Response, next: NextFunction) => {
  6 |     const { userId } = req.params;
  7 | 
  8 |     try {
  9 |       const snapshots = await Snapshot.find({ user: userId });
 10 |       res.locals.snapshots = snapshots;
 11 |       return next();
 12 |     } catch (err) {
 13 |       return next({
 14 |         log: 'Error in getSnapshot middleware: ' + err,
 15 |         message: 'Error while fetching snapshots.',
 16 |       });
 17 |     }
 18 |   },
 19 | 
 20 |   postSnapshot: async (req: Request, res: Response, next: NextFunction) => {
 21 |     const { podName, metrics, user } = req.body.snapshot;
 22 | 
 23 |     try {
 24 |       if (!podName || !metrics || !user) {
 25 |         return next({
 26 |           status: 400,
 27 |           log: 'Error in postSnapshot middleware: invalid input data',
 28 |           message:
 29 |             'Cannot create new snapshot. Please provide all required information.',
 30 |         });
 31 |       }
 32 |       const newSnapshot = await Snapshot.create({ podName, metrics, user });
 33 |       res.locals.newSnapshot = newSnapshot;
 34 |       return next();
 35 |     } catch (err) {
 36 |       return next({
 37 |         log: 'Error in postSnapshot middleware: ' + err,
 38 |         message: 'Error while creating new snapshot.',
 39 |       });
 40 |     }
 41 |   },
 42 |   getOneSnapshot: async (req: Request, res: Response, next: NextFunction) => {
 43 |     const { _id } = req.params;
 44 | 
 45 |     try {
 46 |       if (!_id) {
 47 |         return next({
 48 |           status: 400,
 49 |           log: 'Error in getOneSnapshot middleware: snapshot id not provided',
 50 |           message:
 51 |             'Cannot get snapshot. Please provide all required information.',
 52 |         });
 53 |       }
 54 |       const snapshot = await Snapshot.findOne({ _id });
 55 |       if (!snapshot) {
 56 |         return next({
 57 |           status: 400,
 58 |           log: 'Error in getOneSnapshot middleware: snapshot not found',
 59 |           message: 'The snapshot you are looking for does not exist.',
 60 |         });
 61 |       }
 62 |       res.locals.snapshot = snapshot;
 63 |       return next();
 64 |     } catch (err) {
 65 |       return next({
 66 |         log: 'Error in getOneSnapshot middleware: ' + err,
 67 |         message: 'Error while fetching snapshot.',
 68 |       });
 69 |     }
 70 |   },
 71 |   deleteSnapshot: async (req: Request, res: Response, next: NextFunction) => {
 72 |     const { _id } = req.params;
 73 |     try {
 74 |       if (!_id) {
 75 |         return next({
 76 |           status: 400,
 77 |           log: 'Error in deleteSnapshot middleware: snapshot id not provided',
 78 |           message:
 79 |             'Cannot create delete snapshot. Please provide all required information.',
 80 |         });
 81 |       }
 82 |       const deletedSnapshot = await Snapshot.findOneAndDelete({ _id });
 83 |       if (!deletedSnapshot) {
 84 |         return next({
 85 |           status: 400,
 86 |           log: 'Error in deleteSnapshot middleware: snapshot not found',
 87 |           message:
 88 |             'The entry you want to delete does not exist in the database',
 89 |         });
 90 |       }
 91 |       res.locals.deletedSnapshot = deletedSnapshot;
 92 |       return next();
 93 |     } catch (err) {
 94 |       return next({
 95 |         log: 'Error in deleteSnapshot middleware: ' + err,
 96 |         message: 'Error while deleting snapshot.',
 97 |       });
 98 |     }
 99 |   },
100 | };
101 | 
102 | export default dbController;
103 | 


--------------------------------------------------------------------------------
/server/router/authRouter.ts:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import authController from '../controllers/authController';
 3 | 
 4 | const authRouter = express.Router();
 5 | 
 6 | authRouter.post('/signup', authController.createUser, (req, res) => {
 7 |   return res.status(200).json(res.locals.newUser);
 8 | });
 9 | 
10 | authRouter.post('/login', authController.login, (req, res) => {
11 |   return res.status(200).json(res.locals.user);
12 | });
13 | 
14 | export default authRouter;
15 | 


--------------------------------------------------------------------------------
/server/router/dbRouter.ts:
--------------------------------------------------------------------------------
 1 | import express, { Request, Response } from 'express';
 2 | import dbController from '../controllers/dbController';
 3 | 
 4 | const dbRouter = express.Router();
 5 | 
 6 | // get snapshots from database based on user id
 7 | dbRouter.get(
 8 |   '/:userId',
 9 |   dbController.getSnapshot,
10 |   (req: Request, res: Response) => {
11 |     return res.status(200).json(res.locals.snapshots);
12 |   }
13 | );
14 | 
15 | // get one snapshot from database
16 | dbRouter.get(
17 |   '/one/:_id',
18 |   dbController.getOneSnapshot,
19 |   (req: Request, res: Response) => {
20 |     return res.status(200).json(res.locals.snapshot);
21 |   }
22 | );
23 | 
24 | // post new snapshot to database
25 | dbRouter.post('/', dbController.postSnapshot, (req: Request, res: Response) => {
26 |   return res.status(200).json(res.locals.newSnapshot);
27 | });
28 | 
29 | // delete snapshot from database based on snapshot_id
30 | dbRouter.delete(
31 |   '/:_id',
32 |   dbController.deleteSnapshot,
33 |   (req: Request, res: Response) => {
34 |     return res.status(200).json(res.locals.deletedSnapshot);
35 |   }
36 | );
37 | 
38 | export default dbRouter;
39 | 


--------------------------------------------------------------------------------
/server/server.ts:
--------------------------------------------------------------------------------
 1 | import express, { Request, Response, NextFunction } from 'express';
 2 | import * as path from 'path';
 3 | import apiController from './controllers/apiController';
 4 | import dbRouter from './router/dbRouter';
 5 | import authRouter from './router/authRouter';
 6 | import type { ServerError } from '../types';
 7 | 
 8 | const app = express();
 9 | const PORT = 3000;
10 | 
11 | app.use(express.json());
12 | app.use(express.urlencoded({ extended: true }));
13 | 
14 | // serving static files
15 | app.use('/public', express.static(path.resolve(__dirname, '../client/public')));
16 | app.use('/dist', express.static(path.resolve(__dirname, '../dist')));
17 | 
18 | app.get('/', (req, res) => {
19 |   return res
20 |     .status(200)
21 |     .sendFile(path.join(__dirname, '../client/public/index.html'));
22 | });
23 | 
24 | // Routes
25 | app.use('/snapshots', dbRouter);
26 | app.use('/user', authRouter);
27 | app.post(
28 |   '/api',
29 |   apiController.gpuUsage,
30 |   (req: Request, res: Response, next: NextFunction) => {
31 |     return res.status(200).json(res.locals.gpuUsage);
32 |   }
33 | );
34 | 
35 | app.get('/*', (req, res) => {
36 |   return res
37 |     .status(200)
38 |     .sendFile(path.join(__dirname, '../client/public/index.html'));
39 | });
40 | 
41 | app.get('*', (req: Request, res: Response, next: NextFunction) =>
42 |   res.status(404).send(`Page not found`)
43 | );
44 | 
45 | //Global Error Handler
46 | app.use((err: ServerError, req: Request, res: Response, next: NextFunction) => {
47 |   const defaultErr: ServerError = {
48 |     log: 'Express error handler caught unknown middleware error',
49 |     status: 500,
50 |     message: { err: 'An error occurred' },
51 |   };
52 |   const errorObj: ServerError = Object.assign({}, defaultErr, err);
53 |   return res.status(errorObj.status).json(errorObj.message);
54 | });
55 | 
56 | app.listen(PORT, () => {
57 |   console.log(`Server listening on port: ${PORT}`);
58 | });
59 | 
60 | export default app;
61 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: 'class',
 4 |   content: [
 5 |     './client/pages/**/*.tsx',
 6 |     './client/components/**/*.tsx',
 7 |     './client/public/index.html',
 8 |     'node_modules/flowbite-react/lib/esm/',
 9 |   ],
10 |   theme: {
11 |     screens: {
12 |       sm: '480px',
13 |       md: '768px',
14 |       lg: '976px',
15 |       xl: '1440px',
16 |     },
17 |     fontFamily: {
18 |       sans: ['Open Sans', 'sans-serif'],
19 |       serif: ['Merriweather', 'serif'],
20 |     },
21 |     extend: {
22 |       colors: {
23 |         kalegreen: {
24 |           50: '#E6FAF1',
25 |           100: '#CDF4E2',
26 |           200: '#9FEAC8',
27 |           300: '#6CDFAB',
28 |           400: '#3AD48F',
29 |           500: '#26AE71',
30 |           600: '#1E8A5A',
31 |           700: '#176944',
32 |           800: '#10472E',
33 |           900: '#072116',
34 |           950: '#04110B',
35 |         },
36 |         kaleblue: {
37 |           50: '#EDFCFD',
38 |           100: '#DBFAFB',
39 |           200: '#B2F3F6',
40 |           300: '#8DEEF1',
41 |           400: '#69E8ED',
42 |           500: '#41E2E8',
43 |           600: '#1AD0D6',
44 |           700: '#139B9F',
45 |           800: '#0D6669',
46 |           900: '#073537',
47 |           950: '#031A1B',
48 |         },
49 |       },
50 |       fontFamily: {
51 |         inter: ['Inter', 'sans-serif'],
52 |       },
53 |       fontSize: {
54 |         xs: ['0.75rem', { lineHeight: '1.5' }],
55 |         sm: ['0.875rem', { lineHeight: '1.5715' }],
56 |         base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
57 |         lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
58 |         xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
59 |         '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
60 |         '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
61 |         '4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
62 |         '5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
63 |         '6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
64 |       },
65 |     },
66 |   },
67 |   plugins: [require('flowbite/plugin')],
68 | };
69 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["client/**/*", "cypress/**/*", "server/**/*"],
 3 |   "compilerOptions": {
 4 |     "jsx": "react", // Transpile JSX to React components
 5 |     "target": "ES5", // Adjust target JavaScript version as needed
 6 |     "module": "CommonJS", // Use CommonJS modules
 7 |     "esModuleInterop": true, // Enable interop between module systems
 8 |     "noImplicitAny": true //explicitly typing
 9 |     // "moduleResolution": "webpack", // Replace with your bundler's option
10 |     // "allowImportingTsExtensions": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
 1 | export type Metric = {
 2 |   name: string;
 3 |   time: number[];
 4 |   value: number[];
 5 | };
 6 | 
 7 | export type MetricsState = {
 8 |   status: 'loading' | 'failed' | 'finished';
 9 |   error: { status: number; data: any } | null;
10 |   data: MetricsData | null;
11 | };
12 | 
13 | export type ErrorMessage = {
14 |   err: string;
15 | };
16 | export type ServerError = {
17 |   log: string;
18 |   status: number;
19 |   message: ErrorMessage;
20 | };
21 | 
22 | export type FetchResponseData = {
23 |   status: string;
24 |   data: {
25 |     result: Array<{
26 |       values: Array<[number, string | number]>;
27 |     }>;
28 |   };
29 | };
30 | 
31 | export type MetricsData = {
32 |   metric: string;
33 |   time: string[];
34 |   value: number[];
35 | };
36 | 
37 | // res.locals.metrics
38 | export interface ApiData {
39 |   podName: string;
40 |   date: string;
41 |   metrics: { [key: string]: MetricsData };
42 | }
43 | 
44 | export type VerifyData = {
45 |   firstName?: string;
46 |   email: string;
47 |   password: string;
48 |   confirmPassword?: string;
49 | };
50 | 
51 | export type UserState = {
52 |   userData: any | null;
53 |   sessionData: any[];
54 | };
55 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | 
 5 | module.exports = {
 6 |   entry: './client/index.tsx',
 7 |   mode: process.env.NODE_ENV,
 8 |   output: {
 9 |     path: path.resolve(__dirname, 'dist'),
10 |     filename: 'bundle.js',
11 |   },
12 |   devServer: {
13 |     historyApiFallback: true,
14 |     static: {
15 |       publicPath: '/public',
16 |       directory: path.resolve(__dirname, './client/public'),
17 |     },
18 |     proxy: [
19 |       {
20 |         context: ['/api', '/user', '/snapshots'],
21 |         target: 'http://localhost:3000',
22 |       },
23 |     ],
24 |   },
25 |   plugins: [
26 |     new MiniCssExtractPlugin({
27 |       filename: 'styles.css',
28 |     }),
29 |     new HtmlWebpackPlugin({
30 |       title: 'development',
31 |       template: './client/public/index.html',
32 |     }),
33 |   ],
34 |   module: {
35 |     rules: [
36 |       {
37 |         test: /\.jsx?$/,
38 |         exclude: /node_modules/,
39 |         use: {
40 |           loader: 'babel-loader',
41 |           options: {
42 |             presets: [
43 |               ['@babel/preset-env', { targets: 'defaults' }],
44 |               ['@babel/preset-react', { targets: 'defaults' }],
45 |             ],
46 |           },
47 |         },
48 |       },
49 |       {
50 |         test: /\.(ts|tsx)$/,
51 |         exclude: /node_modules/,
52 |         use: ['ts-loader'],
53 |       },
54 |       // {
55 |       //   test: /\.s[ac]ss$/i,
56 |       //   use: [
57 |       //     MiniCssExtractPlugin.loader,
58 |       //     'css-loader',
59 |       //     'postcss-loader',
60 |       //     'sass-loader',
61 |       //   ],
62 |       // },
63 |       {
64 |         test: /\.css$/,
65 |         use: [
66 |           MiniCssExtractPlugin.loader,
67 |           {
68 |             loader: 'css-loader',
69 |             options: {
70 |               importLoaders: 1,
71 |             },
72 |           },
73 |           {
74 |             loader: 'postcss-loader',
75 |             options: {
76 |               postcssOptions: {
77 |                 plugins: [require('tailwindcss'), require('autoprefixer')],
78 |               },
79 |             },
80 |           }, // Add postcss-loader for processing Tailwind CSS
81 |         ],
82 |       },
83 |     ],
84 |   },
85 | 
86 |   resolve: {
87 |     extensions: ['.tsx', '.ts', '.jsx', '.js'],
88 |   },
89 | };
90 | 


--------------------------------------------------------------------------------