From c54d998143aa9c6b23644718b8482256c86aefe9 Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Fri, 3 Dec 2021 15:07:43 -0500
Subject: [PATCH 01/10] added buttons and some text

---
 .../AdminPanelLayout/ClusterPane.module.scss         | 11 +++++++++++
 src/components/AdminPanelLayout/ClusterPane.tsx      | 12 +++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AdminPanelLayout/ClusterPane.module.scss

diff --git a/src/components/AdminPanelLayout/ClusterPane.module.scss b/src/components/AdminPanelLayout/ClusterPane.module.scss
new file mode 100644
index 00000000..afc183ee
--- /dev/null
+++ b/src/components/AdminPanelLayout/ClusterPane.module.scss
@@ -0,0 +1,11 @@
+@import "../../theme";
+
+.cluster-pane {
+    Button {
+        float: right;
+        margin-left: 15px;
+    }
+    p {
+        padding-top: 65px;
+    }
+}
diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 6722edbe..a5c32a5b 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -1,5 +1,15 @@
 import React from 'react';
+import {Button} from 'react-bootstrap';
+import {Layout} from '../../pages/Layout/Layout';
+import styles from './ClusterPane.module.scss';
 
 export const ClusterPane = () => (
-  <>The cluster management panel is still under construction</>
+  <Layout>
+    <div className={styles['cluster-pane']}>
+      <Button>Set Maintenance Mode</Button>
+      <Button>Remove Node</Button>
+      <Button>Add Node</Button>
+      <p>------------------- &lt;Cluster Name&gt; -------------------</p>
+    </div>
+  </Layout>
 );

From 6619810fcb51f9edeab5eef479ce52c6d1dd4d1e Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Fri, 3 Dec 2021 15:54:06 -0500
Subject: [PATCH 02/10] stubbed out basic node component

---
 .../AdminPanelLayout/ClusterPane.tsx          |  4 +-
 .../AdminPanelLayout/Node.module.scss         | 10 +++++
 src/components/AdminPanelLayout/Node.tsx      | 45 +++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AdminPanelLayout/Node.module.scss
 create mode 100644 src/components/AdminPanelLayout/Node.tsx

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index a5c32a5b..fd456688 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Button} from 'react-bootstrap';
 import {Layout} from '../../pages/Layout/Layout';
 import styles from './ClusterPane.module.scss';
+import Node from './Node';
 
 export const ClusterPane = () => (
   <Layout>
@@ -9,7 +10,8 @@ export const ClusterPane = () => (
       <Button>Set Maintenance Mode</Button>
       <Button>Remove Node</Button>
       <Button>Add Node</Button>
-      <p>------------------- &lt;Cluster Name&gt; -------------------</p>
+      <p>------------------- CLUSTER NAME -------------------</p>
     </div>
+    <Node/>
   </Layout>
 );
diff --git a/src/components/AdminPanelLayout/Node.module.scss b/src/components/AdminPanelLayout/Node.module.scss
new file mode 100644
index 00000000..7421a4b8
--- /dev/null
+++ b/src/components/AdminPanelLayout/Node.module.scss
@@ -0,0 +1,10 @@
+@import "../../theme";
+
+.node {
+    div {
+        border: 1px solid black;
+    }
+    p {
+        text-align: left;
+    }
+}
diff --git a/src/components/AdminPanelLayout/Node.tsx b/src/components/AdminPanelLayout/Node.tsx
new file mode 100644
index 00000000..3271f1e3
--- /dev/null
+++ b/src/components/AdminPanelLayout/Node.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './Node.module.scss';
+import {Layout} from '../../pages/Layout/Layout';
+
+enum NodeStatus {
+  Good,
+  Issues,
+  Maintenance,
+  Offline
+}
+
+let status = NodeStatus.Good;
+
+const Node = () => {
+  if (status !== NodeStatus.Offline) {
+    return (
+      <Layout className={styles['node']}>
+        <div>
+          <h1>Node {}</h1>
+          <h1>Status: {}</h1>
+          <p>_____________________</p>
+          <p>Current Deployed Labs: ##</p>
+          <p>Average CPU Usage: ##</p>
+          <p>Current CPU Usage: ##</p>
+          <p>Average RAM Usage: ##</p>
+          <p>Current RAM Usage: ##</p>
+          <p>Scheduled Maintenance:</p>
+          <p>   Drive 1: ##, Drive 2: ##</p>
+          <p>Scheduled Maintenance: </p>
+          <p>Uptime: ##</p>
+        </div>
+      </Layout>
+    );
+  }
+  else {
+    return (
+      <div>
+        <h2>Server Offline!</h2>
+        <p>Last known ip is </p>
+      </div>
+    );
+  }
+};
+
+export default Node;

From a12498eb80dfbdbbe789cd5e022e960d577b3f36 Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Wed, 5 Jan 2022 12:13:36 -0500
Subject: [PATCH 03/10] added colored circle that changes color based on node
 status

---
 .../AdminPanelLayout/ClusterPane.tsx          |  2 +-
 .../AdminPanelLayout/Node.module.scss         | 38 ++++++++++++++++
 src/components/AdminPanelLayout/Node.tsx      | 44 ++++++++++++++-----
 3 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index fd456688..3333cf0c 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -12,6 +12,6 @@ export const ClusterPane = () => (
       <Button>Add Node</Button>
       <p>------------------- CLUSTER NAME -------------------</p>
     </div>
-    <Node/>
+    <Node nodeNum={1} statusNum={0}/>
   </Layout>
 );
diff --git a/src/components/AdminPanelLayout/Node.module.scss b/src/components/AdminPanelLayout/Node.module.scss
index 7421a4b8..d7289913 100644
--- a/src/components/AdminPanelLayout/Node.module.scss
+++ b/src/components/AdminPanelLayout/Node.module.scss
@@ -3,8 +3,46 @@
 .node {
     div {
         border: 1px solid black;
+        padding: 5px;
+    }
+    #wrapper {
+        border: 0px;
+        padding: 0px;
     }
     p {
         text-align: left;
     }
+    Button {
+        float: right;
+        margin: 5px;
+    }
+    h1 {
+        float: left;
+        padding-left: 20px;
+    }
+    h2 {
+        margin-top: 10px;
+        text-align: center;
+    }
+    span {
+        margin-left: 10px;
+        margin-top: 10px;
+        height: 30px;
+        width: 30px;
+        background-color: #bbb;
+        border-radius: 50%;
+        display: inline-block;
+    }
+    #good {
+        background-color: #009E0F;
+    }
+    #issues {
+        background-color: #FF9900;
+    }
+    #maintenance {
+        background-color: black;
+    }
+    #offline {
+        background-color: #CF2A27;
+    }
 }
diff --git a/src/components/AdminPanelLayout/Node.tsx b/src/components/AdminPanelLayout/Node.tsx
index 3271f1e3..ffdbdbaf 100644
--- a/src/components/AdminPanelLayout/Node.tsx
+++ b/src/components/AdminPanelLayout/Node.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import styles from './Node.module.scss';
 import {Layout} from '../../pages/Layout/Layout';
+import {Button} from 'react-bootstrap';
 
+// 0 is green, 1 is yellow, 2 is black, 4 is red
 enum NodeStatus {
   Good,
   Issues,
@@ -9,16 +11,32 @@ enum NodeStatus {
   Offline
 }
 
-let status = NodeStatus.Good;
+// number for what node, number for status
+interface NodeProps {
+  nodeNum: number;
+  statusNum: NodeStatus;
+}
 
-const Node = () => {
-  if (status !== NodeStatus.Offline) {
+const Node = (props: NodeProps) => {
+  if (props.statusNum !== NodeStatus.Offline) {
     return (
       <Layout className={styles['node']}>
         <div>
-          <h1>Node {}</h1>
-          <h1>Status: {}</h1>
-          <p>_____________________</p>
+          <h1>Node {props.nodeNum}</h1>
+          <h1>Status:</h1>
+          {props.statusNum === NodeStatus.Good &&
+              <span id={styles['good']}/>
+          }
+          {props.statusNum === NodeStatus.Issues &&
+            <div id={styles['wrapper']}>
+              <span id={styles['issues']}/>
+              <Button>Current Issues</Button>
+            </div>
+          }
+          {props.statusNum === NodeStatus.Maintenance &&
+              <span id={styles['maintenance']}/>
+          }
+          <p>__________________________________</p>
           <p>Current Deployed Labs: ##</p>
           <p>Average CPU Usage: ##</p>
           <p>Current CPU Usage: ##</p>
@@ -27,6 +45,7 @@ const Node = () => {
           <p>Scheduled Maintenance:</p>
           <p>   Drive 1: ##, Drive 2: ##</p>
           <p>Scheduled Maintenance: </p>
+          <Button>edit</Button>
           <p>Uptime: ##</p>
         </div>
       </Layout>
@@ -34,10 +53,15 @@ const Node = () => {
   }
   else {
     return (
-      <div>
-        <h2>Server Offline!</h2>
-        <p>Last known ip is </p>
-      </div>
+      <Layout className={styles['node']}>
+        <div>
+          <h1>Node {props.nodeNum}</h1>
+          <h1>Status:</h1>
+          <span id={styles['maintenance']}/>
+          <h2>Server Offline!</h2>
+          <h2>Last known ip is </h2>
+        </div>
+      </Layout>
     );
   }
 };

From f7d7cb5e7a80a0aa277432f5574d1dd74e47fb6f Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Tue, 1 Feb 2022 16:41:24 -0500
Subject: [PATCH 04/10] more example nodes

---
 src/components/AdminPanelLayout/ClusterPane.tsx  | 3 +++
 src/components/AdminPanelLayout/Node.module.scss | 1 +
 src/components/AdminPanelLayout/Node.tsx         | 4 ++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 3333cf0c..4682e74a 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -13,5 +13,8 @@ export const ClusterPane = () => (
       <p>------------------- CLUSTER NAME -------------------</p>
     </div>
     <Node nodeNum={1} statusNum={0}/>
+    <Node nodeNum={2} statusNum={1}/>
+    <Node nodeNum={3} statusNum={2}/>
+    <Node nodeNum={4} statusNum={3}/>
   </Layout>
 );
diff --git a/src/components/AdminPanelLayout/Node.module.scss b/src/components/AdminPanelLayout/Node.module.scss
index d7289913..0955c578 100644
--- a/src/components/AdminPanelLayout/Node.module.scss
+++ b/src/components/AdminPanelLayout/Node.module.scss
@@ -23,6 +23,7 @@
     h2 {
         margin-top: 10px;
         text-align: center;
+        font-weight: bold;
     }
     span {
         margin-left: 10px;
diff --git a/src/components/AdminPanelLayout/Node.tsx b/src/components/AdminPanelLayout/Node.tsx
index ffdbdbaf..b496d853 100644
--- a/src/components/AdminPanelLayout/Node.tsx
+++ b/src/components/AdminPanelLayout/Node.tsx
@@ -42,7 +42,7 @@ const Node = (props: NodeProps) => {
           <p>Current CPU Usage: ##</p>
           <p>Average RAM Usage: ##</p>
           <p>Current RAM Usage: ##</p>
-          <p>Scheduled Maintenance:</p>
+          <p>Storage:</p>
           <p>   Drive 1: ##, Drive 2: ##</p>
           <p>Scheduled Maintenance: </p>
           <Button>edit</Button>
@@ -57,7 +57,7 @@ const Node = (props: NodeProps) => {
         <div>
           <h1>Node {props.nodeNum}</h1>
           <h1>Status:</h1>
-          <span id={styles['maintenance']}/>
+          <span id={styles['offline']}/>
           <h2>Server Offline!</h2>
           <h2>Last known ip is </h2>
         </div>

From 8a02e71665363ce420527f05b6daa9d4b769b67e Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Mon, 7 Feb 2022 11:51:01 -0500
Subject: [PATCH 05/10] added Maintenance Mode popup window

---
 .../AdminPanelLayout/ClusterPane.tsx          | 60 ++++++++++++++-----
 .../MaintenancePopup.module.scss              | 41 +++++++++++++
 .../AdminPanelLayout/MaintenancePopup.tsx     | 15 +++++
 3 files changed, 101 insertions(+), 15 deletions(-)
 create mode 100644 src/components/AdminPanelLayout/MaintenancePopup.module.scss
 create mode 100644 src/components/AdminPanelLayout/MaintenancePopup.tsx

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 4682e74a..002ea79d 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -1,20 +1,50 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Button} from 'react-bootstrap';
 import {Layout} from '../../pages/Layout/Layout';
 import styles from './ClusterPane.module.scss';
 import Node from './Node';
+import MaintenancePopup from './MaintenancePopup';
 
-export const ClusterPane = () => (
-  <Layout>
-    <div className={styles['cluster-pane']}>
-      <Button>Set Maintenance Mode</Button>
-      <Button>Remove Node</Button>
-      <Button>Add Node</Button>
-      <p>------------------- CLUSTER NAME -------------------</p>
-    </div>
-    <Node nodeNum={1} statusNum={0}/>
-    <Node nodeNum={2} statusNum={1}/>
-    <Node nodeNum={3} statusNum={2}/>
-    <Node nodeNum={4} statusNum={3}/>
-  </Layout>
-);
+
+export const ClusterPane = () => {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const togglePopup = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (<Layout>
+      <div className={styles['cluster-pane']}>
+        <Button onClick={togglePopup}>Set Maintenance Mode</Button>
+        {isOpen && <MaintenancePopup
+          content={
+            <>
+              <h2>Maintenance Scheduler</h2>
+              <form>
+                <label>Node #
+                  <textarea>N/A</textarea>
+                </label>
+                <label>Node #
+                  <textarea>N/A</textarea>
+                </label>
+                <label>Node #
+                  <textarea>N/A</textarea>
+                </label>
+                <Button>Confirm</Button>
+              </form>
+            </>
+          }
+          handleClose={() => togglePopup()}
+        />
+        }
+        <Button>Remove Node</Button>
+        <Button>Add Node</Button>
+        <p>------------------- CLUSTER NAME -------------------</p>
+      </div>
+      <Node nodeNum={1} statusNum={0}/>
+      <Node nodeNum={2} statusNum={1}/>
+      <Node nodeNum={3} statusNum={2}/>
+      <Node nodeNum={4} statusNum={3}/>
+    </Layout>);
+};
diff --git a/src/components/AdminPanelLayout/MaintenancePopup.module.scss b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
new file mode 100644
index 00000000..57ded334
--- /dev/null
+++ b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
@@ -0,0 +1,41 @@
+@import "../../theme";
+
+.popup-box {
+    position: fixed;
+    background: #00000050;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}
+
+.box {
+    position: relative;
+    width: 50%;
+    margin: 0 auto;
+    height: auto;
+    max-height: 70vh;
+    margin-top: calc(100vh - 85vh - 20px);
+    background: #fff;
+    border-radius: 4px;
+    padding: 20px;
+    border: 1px solid #999;
+    overflow: auto;
+    margin-right: 175px;
+}
+
+.close-icon {
+    content: 'x';
+    cursor: pointer;
+    position: fixed;
+    right: 165px;
+    top: 110px;
+    background: #ededed;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    line-height: 20px;
+    text-align: center;
+    border: 1px solid #999;
+    font-size: 20px;
+}
diff --git a/src/components/AdminPanelLayout/MaintenancePopup.tsx b/src/components/AdminPanelLayout/MaintenancePopup.tsx
new file mode 100644
index 00000000..448c5234
--- /dev/null
+++ b/src/components/AdminPanelLayout/MaintenancePopup.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './MaintenancePopup.module.scss';
+
+const MaintenancePopup = (props: { handleClose: () => void; content: React.ReactNode }) => {
+  return (
+    <div className={styles['popup-box']}>
+      <div className={styles['box']}>
+        <span className={styles['close-icon']} onClick={props.handleClose}>x</span>
+        {props.content}
+      </div>
+    </div>
+  );
+};
+
+export default MaintenancePopup;

From b92960d3653ad19c2236f30d02f2fdfbba3dbe36 Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Mon, 7 Feb 2022 17:46:32 -0500
Subject: [PATCH 06/10] refactored node component to use bootstrap card
 component

---
 .../AdminPanelLayout/ClusterPane.tsx          |  1 +
 .../AdminPanelLayout/Node.module.scss         | 21 ------
 src/components/AdminPanelLayout/Node.tsx      | 65 ++++++++++---------
 3 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 002ea79d..8ba649ff 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -21,6 +21,7 @@ export const ClusterPane = () => {
           content={
             <>
               <h2>Maintenance Scheduler</h2>
+              <p>cluster name</p>
               <form>
                 <label>Node #
                   <textarea>N/A</textarea>
diff --git a/src/components/AdminPanelLayout/Node.module.scss b/src/components/AdminPanelLayout/Node.module.scss
index 0955c578..1ce192d5 100644
--- a/src/components/AdminPanelLayout/Node.module.scss
+++ b/src/components/AdminPanelLayout/Node.module.scss
@@ -1,33 +1,12 @@
 @import "../../theme";
 
 .node {
-    div {
-        border: 1px solid black;
-        padding: 5px;
-    }
-    #wrapper {
-        border: 0px;
-        padding: 0px;
-    }
-    p {
-        text-align: left;
-    }
     Button {
         float: right;
         margin: 5px;
     }
-    h1 {
-        float: left;
-        padding-left: 20px;
-    }
-    h2 {
-        margin-top: 10px;
-        text-align: center;
-        font-weight: bold;
-    }
     span {
         margin-left: 10px;
-        margin-top: 10px;
         height: 30px;
         width: 30px;
         background-color: #bbb;
diff --git a/src/components/AdminPanelLayout/Node.tsx b/src/components/AdminPanelLayout/Node.tsx
index b496d853..d13151e1 100644
--- a/src/components/AdminPanelLayout/Node.tsx
+++ b/src/components/AdminPanelLayout/Node.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styles from './Node.module.scss';
-import {Layout} from '../../pages/Layout/Layout';
-import {Button} from 'react-bootstrap';
+import {Button, Card} from 'react-bootstrap';
 
 // 0 is green, 1 is yellow, 2 is black, 4 is red
 enum NodeStatus {
@@ -20,12 +19,11 @@ interface NodeProps {
 const Node = (props: NodeProps) => {
   if (props.statusNum !== NodeStatus.Offline) {
     return (
-      <Layout className={styles['node']}>
-        <div>
-          <h1>Node {props.nodeNum}</h1>
-          <h1>Status:</h1>
+      <Card style={{width: '20rem'}}>
+        <Card.Header className={styles['node']}>
+          Status:
           {props.statusNum === NodeStatus.Good &&
-              <span id={styles['good']}/>
+            <span id={styles['good']}/>
           }
           {props.statusNum === NodeStatus.Issues &&
             <div id={styles['wrapper']}>
@@ -34,34 +32,43 @@ const Node = (props: NodeProps) => {
             </div>
           }
           {props.statusNum === NodeStatus.Maintenance &&
-              <span id={styles['maintenance']}/>
+            <span id={styles['maintenance']}/>
           }
-          <p>__________________________________</p>
-          <p>Current Deployed Labs: ##</p>
-          <p>Average CPU Usage: ##</p>
-          <p>Current CPU Usage: ##</p>
-          <p>Average RAM Usage: ##</p>
-          <p>Current RAM Usage: ##</p>
-          <p>Storage:</p>
-          <p>   Drive 1: ##, Drive 2: ##</p>
-          <p>Scheduled Maintenance: </p>
-          <Button>edit</Button>
-          <p>Uptime: ##</p>
-        </div>
-      </Layout>
+        </Card.Header>
+        <Card.Body>
+            <Card.Title>Node {props.nodeNum}
+            </Card.Title>
+          <Card.Text style={{textAlign: 'left'}}>
+            Current Deployed Labs: ##
+            <br/>Average CPU Usage: ##
+            <br/>Current CPU Usage: ##
+            <br/>Average RAM Usage: ##
+            <br/>Current RAM Usage: ##
+            <br/>Storage:
+            <br/>Drive 1: ##, Drive 2: ##
+            <br/>Scheduled Maintenance:
+            <br/>Uptime: ##
+          </Card.Text>
+        </Card.Body>
+      </Card>
     );
   }
   else {
     return (
-      <Layout className={styles['node']}>
-        <div>
-          <h1>Node {props.nodeNum}</h1>
-          <h1>Status:</h1>
+      <Card style={{ width: '20rem' }}>
+        <Card.Header className={styles['node']}>Status:
           <span id={styles['offline']}/>
-          <h2>Server Offline!</h2>
-          <h2>Last known ip is </h2>
-        </div>
-      </Layout>
+        </Card.Header>
+          <Card.Body>
+            <Card.Title>Node {props.nodeNum} Status:
+              <span id={styles['offline']}/>
+            </Card.Title>
+            <Card.Text>
+              Server Offline!<br/>Last known ip is
+            </Card.Text>
+            <Button>edit</Button>
+          </Card.Body>
+      </Card>
     );
   }
 };

From e93195ca723342ef71affa37fedf60f88173328d Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Mon, 7 Mar 2022 17:04:42 -0500
Subject: [PATCH 07/10] added react-datetime package and dependency. Added
 datetime picker to popup window

---
 package.json                                  |  2 ++
 .../AdminPanelLayout/ClusterPane.tsx          |  9 ++++---
 .../MaintenancePopup.module.scss              |  1 +
 .../AdminPanelLayout/Node.module.scss         |  1 +
 yarn.lock                                     | 26 +++++++++++++++++++
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index f97a4961..dee81ea8 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "humanize-duration": "^3.21.0",
     "jwt-decode": "^2.2.0",
     "luxon": "^1.21.3",
+    "moment": "^2.29.1",
     "node-sass": "^4.12.0",
     "novnc-core": "^0.2.1",
     "object-to-formdata": "^3.0.6",
@@ -60,6 +61,7 @@
     "react-bootstrap": "^1.0.0-beta.16",
     "react-burger-menu": "^2.5.4",
     "react-copy-to-clipboard": "^5.0.3",
+    "react-datetime": "^3.1.1",
     "react-dev-utils": "^10.1.0",
     "react-dom": "^16.9.0",
     "react-pdf": "^4.1.0",
diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 8ba649ff..cfb03a57 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -4,6 +4,7 @@ import {Layout} from '../../pages/Layout/Layout';
 import styles from './ClusterPane.module.scss';
 import Node from './Node';
 import MaintenancePopup from './MaintenancePopup';
+import Datetime from 'react-datetime';
 
 
 export const ClusterPane = () => {
@@ -24,15 +25,15 @@ export const ClusterPane = () => {
               <p>cluster name</p>
               <form>
                 <label>Node #
-                  <textarea>N/A</textarea>
+                  <Datetime />
                 </label>
                 <label>Node #
-                  <textarea>N/A</textarea>
+                  <Datetime />
                 </label>
                 <label>Node #
-                  <textarea>N/A</textarea>
+                  <Datetime />
                 </label>
-                <Button>Confirm</Button>
+                <Button onClick={togglePopup}>Confirm</Button>
               </form>
             </>
           }
diff --git a/src/components/AdminPanelLayout/MaintenancePopup.module.scss b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
index 57ded334..37800d84 100644
--- a/src/components/AdminPanelLayout/MaintenancePopup.module.scss
+++ b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
@@ -7,6 +7,7 @@
     height: 100vh;
     top: 0;
     left: 0;
+    z-index: 2;
 }
 
 .box {
diff --git a/src/components/AdminPanelLayout/Node.module.scss b/src/components/AdminPanelLayout/Node.module.scss
index 1ce192d5..d8fd2d25 100644
--- a/src/components/AdminPanelLayout/Node.module.scss
+++ b/src/components/AdminPanelLayout/Node.module.scss
@@ -25,4 +25,5 @@
     #offline {
         background-color: #CF2A27;
     }
+    z-index: 1;
 }
diff --git a/yarn.lock b/yarn.lock
index 6a660068..f3bb0191 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9265,6 +9265,11 @@ mkdirp@^0.5.3, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
@@ -11153,6 +11158,15 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.5.7:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-expr@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
@@ -11399,6 +11413,13 @@ react-copy-to-clipboard@^5.0.3:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-datetime@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-3.1.1.tgz#adc346efda47653cfff9259c979f03f56106e48c"
+  integrity sha512-gHCTjAniCcMb6jdXpz+MpVe/uCeaHNDOofg+l41nLlJI3uBLBMV40CQbGB2TCTUpCzGT1mCs4vQzKGMjXO/WWQ==
+  dependencies:
+    prop-types "^15.5.7"
+
 react-dev-utils@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.1.0.tgz#ccf82135f6dc2fc91969bc729ce57a69d8e86025"
@@ -11496,6 +11517,11 @@ react-is@^16.12.0, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

From 9d54fd73bf81f1b96331e7a406783368c67b5935 Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Mon, 7 Mar 2022 19:52:03 -0500
Subject: [PATCH 08/10] cluster name can now be passed in to the ClusterPane
 component, edited popup window size

---
 src/components/AdminPanelLayout/AdminPanelLayout.tsx     | 2 +-
 src/components/AdminPanelLayout/ClusterPane.tsx          | 9 +++++----
 .../AdminPanelLayout/MaintenancePopup.module.scss        | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/AdminPanelLayout/AdminPanelLayout.tsx b/src/components/AdminPanelLayout/AdminPanelLayout.tsx
index dc2e6273..3725f8fc 100644
--- a/src/components/AdminPanelLayout/AdminPanelLayout.tsx
+++ b/src/components/AdminPanelLayout/AdminPanelLayout.tsx
@@ -19,7 +19,7 @@ interface AdminPanelLayoutProps {
 
 const panes = [
   {label: 'Application Statistics', eventKey: '#statistics', component: <StatisticsPane/>},
-  {label: 'Cluster Management', eventKey: '#cluster-management', component: <ClusterPane/>},
+  {label: 'Cluster Management', eventKey: '#cluster-management', component: <ClusterPane clusterName={'Cluster 1'}/>},
   {label: 'User Management', eventKey: '#user-management', component: <UsersPane/>},
   {label: 'Downtime Scheduler', eventKey: '#downtime-scheduler', component: <DowntimeScheduler/>}
 ] as const;
diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index cfb03a57..00925a72 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -5,9 +5,10 @@ import styles from './ClusterPane.module.scss';
 import Node from './Node';
 import MaintenancePopup from './MaintenancePopup';
 import Datetime from 'react-datetime';
+// tslint:disable-next-line:no-import-side-effect
+import 'react-datetime/css/react-datetime.css';
 
-
-export const ClusterPane = () => {
+export const ClusterPane = (props: {clusterName: string}) => {
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -22,7 +23,7 @@ export const ClusterPane = () => {
           content={
             <>
               <h2>Maintenance Scheduler</h2>
-              <p>cluster name</p>
+              <p>{props.clusterName}</p>
               <form>
                 <label>Node #
                   <Datetime />
@@ -42,7 +43,7 @@ export const ClusterPane = () => {
         }
         <Button>Remove Node</Button>
         <Button>Add Node</Button>
-        <p>------------------- CLUSTER NAME -------------------</p>
+        <p>{props.clusterName}</p>
       </div>
       <Node nodeNum={1} statusNum={0}/>
       <Node nodeNum={2} statusNum={1}/>
diff --git a/src/components/AdminPanelLayout/MaintenancePopup.module.scss b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
index 37800d84..026cd6f1 100644
--- a/src/components/AdminPanelLayout/MaintenancePopup.module.scss
+++ b/src/components/AdminPanelLayout/MaintenancePopup.module.scss
@@ -14,8 +14,8 @@
     position: relative;
     width: 50%;
     margin: 0 auto;
-    height: auto;
-    max-height: 70vh;
+    height: 550px;
+    //max-height: 150vh;
     margin-top: calc(100vh - 85vh - 20px);
     background: #fff;
     border-radius: 4px;

From d14599ae1fa693add4b04a373818e049d6e4a119 Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Mon, 21 Mar 2022 19:58:36 -0400
Subject: [PATCH 09/10] added more props to node module so more details can be
 passed in

---
 .../AdminPanelLayout/ClusterPane.tsx          |  8 +++----
 src/components/AdminPanelLayout/Node.tsx      | 22 +++++++++++++------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 00925a72..1fcc4794 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -45,9 +45,9 @@ export const ClusterPane = (props: {clusterName: string}) => {
         <Button>Add Node</Button>
         <p>{props.clusterName}</p>
       </div>
-      <Node nodeNum={1} statusNum={0}/>
-      <Node nodeNum={2} statusNum={1}/>
-      <Node nodeNum={3} statusNum={2}/>
-      <Node nodeNum={4} statusNum={3}/>
+      <Node nodeNum={1} statusNum={0} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+      <Node nodeNum={2} statusNum={1} deployedNum={0} avgCPU={75} currentCPU={90} avgRAM={80} currentRAM={85} drive1={25} drive2={50} uptime={9500}/>
+      <Node nodeNum={3} statusNum={2} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+      <Node nodeNum={4} statusNum={3} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
     </Layout>);
 };
diff --git a/src/components/AdminPanelLayout/Node.tsx b/src/components/AdminPanelLayout/Node.tsx
index d13151e1..554d5ac3 100644
--- a/src/components/AdminPanelLayout/Node.tsx
+++ b/src/components/AdminPanelLayout/Node.tsx
@@ -14,6 +14,14 @@ enum NodeStatus {
 interface NodeProps {
   nodeNum: number;
   statusNum: NodeStatus;
+  deployedNum: number;
+  avgCPU: number;
+  currentCPU: number;
+  avgRAM: number;
+  currentRAM: number;
+  drive1: number;
+  drive2: number;
+  uptime: number;
 }
 
 const Node = (props: NodeProps) => {
@@ -39,15 +47,15 @@ const Node = (props: NodeProps) => {
             <Card.Title>Node {props.nodeNum}
             </Card.Title>
           <Card.Text style={{textAlign: 'left'}}>
-            Current Deployed Labs: ##
-            <br/>Average CPU Usage: ##
-            <br/>Current CPU Usage: ##
-            <br/>Average RAM Usage: ##
-            <br/>Current RAM Usage: ##
+            Current Deployed Labs: {props.deployedNum}
+            <br/>Average CPU Usage: {props.avgCPU}%
+            <br/>Current CPU Usage: {props.currentCPU}%
+            <br/>Average RAM Usage: {props.avgRAM}
+            <br/>Current RAM Usage: {props.currentRAM}
             <br/>Storage:
-            <br/>Drive 1: ##, Drive 2: ##
+            <br/>Drive 1: {props.drive1}, Drive 2: {props.drive2}
             <br/>Scheduled Maintenance:
-            <br/>Uptime: ##
+            <br/>Uptime: {props.uptime}
           </Card.Text>
         </Card.Body>
       </Card>

From d48b0b0a11682f5a549d4bb3cd6e3b5919fa60da Mon Sep 17 00:00:00 2001
From: Zion Emond <zionem7@gmail.com>
Date: Sat, 2 Apr 2022 18:05:59 -0400
Subject: [PATCH 10/10] put each node into it's own Col element to make the
 spacing better

---
 .../AdminPanelLayout/ClusterPane.tsx          | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/AdminPanelLayout/ClusterPane.tsx b/src/components/AdminPanelLayout/ClusterPane.tsx
index 1fcc4794..bb3a465c 100644
--- a/src/components/AdminPanelLayout/ClusterPane.tsx
+++ b/src/components/AdminPanelLayout/ClusterPane.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Button} from 'react-bootstrap';
+import {Button, Col, Row} from 'react-bootstrap';
 import {Layout} from '../../pages/Layout/Layout';
 import styles from './ClusterPane.module.scss';
 import Node from './Node';
@@ -45,9 +45,19 @@ export const ClusterPane = (props: {clusterName: string}) => {
         <Button>Add Node</Button>
         <p>{props.clusterName}</p>
       </div>
-      <Node nodeNum={1} statusNum={0} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
-      <Node nodeNum={2} statusNum={1} deployedNum={0} avgCPU={75} currentCPU={90} avgRAM={80} currentRAM={85} drive1={25} drive2={50} uptime={9500}/>
-      <Node nodeNum={3} statusNum={2} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
-      <Node nodeNum={4} statusNum={3} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+      <Row className='d-flex justify-content-between'>
+        <Col key={1} md={5}>
+          <Node nodeNum={1} statusNum={0} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+        </Col>
+        <Col key={2} md={5}>
+          <Node nodeNum={2} statusNum={1} deployedNum={0} avgCPU={75} currentCPU={90} avgRAM={80} currentRAM={85} drive1={25} drive2={50} uptime={9500}/>
+        </Col>
+        <Col key={3} md={5}>
+          <Node nodeNum={4} statusNum={2} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+        </Col>
+        <Col key={4} md={5}>
+          <Node nodeNum={4} statusNum={3} deployedNum={2} avgCPU={53} currentCPU={30} avgRAM={50} currentRAM={45} drive1={250} drive2={500} uptime={2500}/>
+        </Col>
+      </Row>
     </Layout>);
 };