added setup page for k8 cluster setup

open-source-labs · Apr 20, 2023 · 04c022c · 04c022c
1 parent f3a968a
commit 04c022c
Show file tree

Hide file tree

Showing 18 changed files with 234 additions and 114 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+SetupApp
diff --git a/SetupApp/Setup/Setup.tsx b/SetupApp/Setup/Setup.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Setup.module.scss';
+
+const Setup = (): JSX.Element => {
+  return (
+    <div className={styles.buttonContainer}>
+      <button className={styles.button1} style={{ alignSelf: 'center' }}
+        onClick={() => fetch('/api/setup/promInstall')}>Install Prometheus Operator</button>
+      <span style={{display: 'none'}}>complete!&#10004;</span>
+      <button className={styles.button1} style={{ alignSelf: 'center' }} onClick={() => fetch('/api/setup/applyGraf')}>Get Metrics</button>
+      <button className={styles.button1} style={{ alignSelf: 'center' }} onClick={() => fetch('/api/setup/portForward')}>Launch Port Forwarding</button>
+    </div>
+  );
+};
+
+export default Setup;
diff --git a/SetupApp/Setup/SetupDisplay.tsx b/SetupApp/Setup/SetupDisplay.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Setup from './Setup';
+import styles from './Setup.module.scss';
+
+const SetupDisplay = (): JSX.Element => {
+  return (
+    <div className={styles.container}>
+      <h3>Configure Kubernetes</h3>
+      <div><Setup /></div>
+    </div>
+  );
+};
+
+export default SetupDisplay;
diff --git a/SetupApp/Setup/setup.css b/SetupApp/Setup/setup.css
@@ -0,0 +1,29 @@
+.container {
+	height: 30vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-evenly;
+}
+
+.buttonContainer {
+	height: 20vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+button {
+  color: color(light, tan);
+  align-self: start;
+  font-size: 1rem;
+  border-radius: 5px;
+  border: none;
+  border-radius: 5px;
+  padding: 0.25em 0.75em;
+  min-width: 10ch;
+  text-align: center;
+  line-height: 1.1;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
diff --git a/SetupApp/index.html b/SetupApp/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Quicksand:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="index.js"></script>
+    <title>Set Up Your Kubernetes Cluster</title>
+    <style>
+      body {
+        height: 79vh;
+        font-family: "Bai Jamjuree", sans-serif;
+        background: rgb(132, 202, 241);
+        background: linear-gradient(
+          107deg,
+          rgba(132, 202, 241, 1) 0%,
+          rgba(74, 194, 172, 1) 50%,
+          rgba(83, 139, 198, 1) 100%
+        );
+        background-size: cover;
+      }
+
+      .buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+
+      .buttonContainer {
+        margin-top: 20vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        text-align: center;
+      }
+
+      button {
+        font-family: "Bai Jamjuree", sans-serif;
+        color: color(light, tan);
+        align-self: center;
+        font-size: 1rem;
+        border-radius: 5px;
+        border: none;
+        border-radius: 5px;
+        padding: 0.5em 0.75em;
+        margin: 8px;
+        min-width: 10ch;
+        text-align: center;
+        line-height: 1.1;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="root2"></div>
+    <div class="buttonContainer">
+
+      <div class="buttons">
+        <h1>Set Up Your Kubernetes Cluster with Docketeer!</h1>
+        <button id="prom">Install Prometheus Operator</button>
+        <button id="metrics">Set Up Grafana</button>
+        <button id="port">Launch Port Forwarding</button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/SetupApp/index.js b/SetupApp/index.js
@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const promInstall = document.querySelector('#prom');
+  const grafInstall = document.querySelector('#metrics');
+  const portForward = document.querySelector('#port');
+
+  promInstall.addEventListener('click', () => {
+    fetch('/api/setup/promInstall');
+  });
+
+  grafInstall.addEventListener('click', () => {
+    fetch('/api/setup/applyGraf');
+  });
+
+  portForward.addEventListener('click', () => {
+    fetch('/api/setup/portForward');
+  });
+
+});
diff --git a/SetupApp/package.json b/SetupApp/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "setupapp",
+  "type": "module",
+  "productName": "Docketeer Setup",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "Set up your Kubernetes cluster with Docketeer.",
+  "author": "Docketeer",
+  "main": "index.tsx",
+  "scripts": {
+    "start": "node index2.tsx",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "express": "^4.18.2",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.62.0",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.4"
+  }
+}
diff --git a/__tests__/ServerRoutes.test.js b/__tests__/ServerRoutes.test.js
@@ -82,7 +82,6 @@ describe('uid test', () => {
 })
 
 // account route
-xdescribe('Account Route', () => {
 xdescribe('Account Route', () => {
   test('Get request', () => {
     request(app)
@@ -95,7 +94,6 @@ xdescribe('Account Route', () => {
 
 
 // admin route
-xdescribe('Admin Route', () => {
 xdescribe('Admin Route', () => {
   test('Get request', () => {
     request(app)
@@ -107,7 +105,6 @@ xdescribe('Admin Route', () => {
 });
 
 // api route
-xdescribe('Api Route', () => {
 xdescribe('Api Route', () => {
   test('Get request', () => {
     request(app)
@@ -119,7 +116,6 @@ xdescribe('Api Route', () => {
 });
 
 // command route
-xdescribe('Command Route', () => {
 xdescribe('Command Route', () => {
   test('Get refreshRunning', () => {
     request(app)
@@ -131,7 +127,6 @@ xdescribe('Command Route', () => {
 });
 
 // db route
-xdescribe('Db Route', () => {
 xdescribe('Db Route', () => {
   test('Get request', () => {
     request(app)
@@ -143,7 +138,6 @@ xdescribe('Db Route', () => {
 });
 
 // init route
-xdescribe('Init Route', () => {
 xdescribe('Init Route', () => {
   test('Get request', () => {
     request(app)
@@ -155,7 +149,6 @@ xdescribe('Init Route', () => {
 });
 
 // login route
-xdescribe('Login Route', () => {
 xdescribe('Login Route', () => {
   test('Get request', () => {
     request(app)
@@ -167,7 +160,6 @@ xdescribe('Login Route', () => {
 });
 
 // logout route
-xdescribe('Logout Route', () => {
 xdescribe('Logout Route', () => {
   test('Get request', () => {
     request(app)

diff --git a/server/app.ts b/server/app.ts
@@ -4,12 +4,12 @@ import { ServerError, GlobalErrorObject } from '../types';
 import cors from 'cors';
 import { exec } from 'child_process';
 import cookieParser from 'cookie-parser'; // for when cookies get implemented
+import * as path from 'path';
 
 const app = express();
 
 // allow requests from other domains
 app.use(cors());
-
 app.use(cookieParser());
 
 // run commands in an exec (terminal instance); restarts containers running from the docketeerx/docketeer image using their ID
@@ -39,11 +39,12 @@ import loginRouter from './routes/loginRouter';
 import logoutRouter from './routes/logoutRouter';
 import setupRouter from './routes/setupRouter';
 import signupRouter from './routes/signupRouter';
-// import userController from './controllers/userController';
 
 // Enabling middleware...
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
+app.use(express.static('SetupApp'));
+
 // app.use(cookieParser()); // for when cookies get implemented
 
 // check for cookie
@@ -53,10 +54,20 @@ app.use(express.urlencoded({ extended: true }));
 // });
 // console.log('exited cookie check');
 // Defining routers...
+
+app.use('/k8', (req: Request, res: Response) => {
+  // const options = {
+  //   headers: {
+  //     'Content-Type': 'application/javascript'
+  //   }
+  // };
+  res.status(200).sendFile(path.join(__dirname, '../SetupApp/index.html'));
+});
+
+
 app.use('/account', accountRouter);
 app.use('/admin', adminRouter);
 app.use('/gapi', apiRouter);
-// app.use('/api', apiRouter);
 app.use('/command', commandRouter);
 app.use('/db', dbRouter);
 app.use('/init', initRouter);

diff --git a/server/controllers/grafanaApiController.ts b/server/controllers/grafanaApiController.ts
@@ -10,9 +10,8 @@ interface GrafanaResponse {
 // http://host.docker.internal:3000/api/search?query=${encodeURIComponent(dashboard)}`
 const grafanaApiController: GrafanaApiController = {
   getApi: async (req, res, next): Promise<void> => {
-    console.log('HEYYYYYYYY');
     try {
-      const response = await fetch('http://localhost:3000/api/auth/keys', {
+      const response = await fetch('http://host.docker.internal:3000/api/auth/keys', {
         method: 'POST',
         // mode: 'no-cors',
         headers: {
@@ -27,7 +26,6 @@ const grafanaApiController: GrafanaApiController = {
           secondsToLive: 86400,
         }),
       });
-      console.log('YO BOI');
       const data = (await response.json()) as GrafanaResponse;
       res.locals.key = data.key;
 
@@ -45,11 +43,10 @@ const grafanaApiController: GrafanaApiController = {
   },
 
   getUid: async (req, res, next): Promise<void> => {
-    console.log(req.body);
     const { key, dashboard }: { key: string; dashboard: string } = req.body;
     try {
       const response = await fetch(
-        `http://localhost:3000/api/search?query=${encodeURIComponent(
+        `http://host.docker.internal:3000/api/search?query=${encodeURIComponent(
           dashboard
         )}`,
         {
@@ -61,16 +58,14 @@ const grafanaApiController: GrafanaApiController = {
         }
       );
       const data: any = await response.json();
-      console.log('THIS IS DATA', data);
       const uidKey: any = data[0].uid;
       res.locals.uid = uidKey;
-      console.log('UID KEY HERE!!', uidKey);
       return next();
     } catch (err) {
       return next({
         log: 'getUid failed',
         status: 200,
-        message: { err: 'Cant get uid' },
+        message: { err: 'Cannot get uid' },
       });
     }
   }