Initial refactor

Client/src/Components/MonitorTable/index.css

@@ -0,0 +1,49 @@
+.host-row {
+  display: flex;
+  align-items: center;
+}
+
+.host-open-icon {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: 8px;
+}
+
+.host-name {
+  width: 100px;
+  font-size: var(--env-var-font-size-medium);
+  font-weight: bold;
+  margin-right: var(--env-var-spacing-1);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.host-percentage {
+  font-size: var(--env-var-font-size-medium);
+}
+
+.host-status {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.host-status-details {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-2);
+  padding: calc(var(--env-var-spacing-1) / 2);
+}
+
+.host-status-text {
+  font-size: var(--env-var-font-size-medium);
+  line-height: var(--env-var-font-size-medium);
+}
+.host-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: calc(var(--env-var-spacing-1) / 2);
+}

Client/src/Components/MonitorTable/index.jsx

@@ -0,0 +1,129 @@
+import "./index.css";
+import PropTypes from "prop-types";
+import { DataGrid } from "@mui/x-data-grid";
+import OpenIt from "../../assets/Images/Icon-open-in-tab-gray.png";
+import ResponseTimeChart from "../Charts/ResponseTimeChart";
+
+const Host = ({ params }) => {
+  return (
+    <div className="host-row">
+      <a href={params.value.url} target="_blank">
+        <img className="host-open-icon" src={OpenIt} alt="OpenIt" />
+      </a>
+      <div className="host-name">{params.value.title}</div>
+      <div
+        className="host-percentage"
+        style={{ color: params.value.percentageColor }}
+      >
+        {params.value.precentage}%
+      </div>
+    </div>
+  );
+};
+
+const Status = ({ params }) => {
+  console.log(params.value.status);
+  return (
+    <div className="host-status">
+      <div
+        className="host-status-details"
+        style={{ backgroundColor: params.value.backgroundColor }}
+      >
+        <div
+          className="host-status-dot"
+          style={{ backgroundColor: params.value.statusDotColor }}
+        />
+        <span className="host-status-text">{params.value.status}</span>
+      </div>
+    </div>
+  );
+};
+
+const cols = [
+  {
+    field: "host",
+    headerName: "Host",
+    renderCell: (params) => {
+      return <Host params={params} />;
+    },
+    flex: 1,
+  },
+  {
+    field: "status",
+    headerName: "Status",
+    renderCell: (params) => {
+      return <Status params={params} />;
+    },
+  },
+  {
+    field: "response",
+    headerName: "Response",
+    renderCell: (params) => {
+      return <ResponseTimeChart checks={params.value.checks} />;
+    },
+    flex: 1,
+  },
+  {
+    field: "actions",
+    headerName: "Actions",
+  },
+];
+
+let rows = [];
+
+const MonitorTable = ({ monitors = [] }) => {
+  rows = monitors.map((monitor) => {
+    return {
+      id: monitor._id,
+      host: {
+        title: monitor.name,
+        url: monitor.url,
+        precentage: 100,
+        percentageColor:
+          monitor.status === true
+            ? "var(--env-var-color-17)"
+            : "var(--env-var-color-19)",
+      },
+      status: {
+        status: monitor.status === true ? "Up" : "Down",
+        backgroundColor:
+          monitor.status === true
+            ? "var(--env-var-color-20)"
+            : "var(--env-var-color-21)",
+        statusDotColor:
+          monitor.status === true
+            ? "var(--env-var-color-17)"
+            : "var(--env-var-color-19)",
+      },
+      response: {
+        checks: monitor.checks,
+      },
+    };
+  });
+
+  return (
+    <div style={{ border: "1px solid red" }}>
+      <h1>Monitor Table</h1>
+      <DataGrid
+        autoHeight
+        columns={cols}
+        rows={rows}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 10 },
+          },
+        }}
+        pageSizeOptions={[5, 10]}
+      />
+    </div>
+  );
+};
+
+MonitorTable.propTypes = {
+  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+Status.propTypes = { params: PropTypes.object.isRequired };
+Host.propTypes = { params: PropTypes.object.isRequired };
+
+export default MonitorTable;

Client/src/Pages/Monitors/index.jsx

@@ -9,6 +9,7 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
 import HostsTable from "../../Components/HostsTable";
 import Pagination from "../../Components/Pagination";
+import MonitorTable from "../../Components/MonitorTable";
 
 const Monitors = () => {
   const navigate = useNavigate();
@@ -28,6 +29,7 @@ const Monitors = () => {
 
   return (
     <div className="monitors">
+      <MonitorTable monitors={monitorState.monitors} />
       <div className="monitors-bar">
         <div className="monitors-bar-title">
           Hello, {authState.user.firstname}

Client/src/Pages/Monitors/monitors.css

@@ -66,24 +66,6 @@
   font-size: var(--env-var-font-size-medium);
 }
 
-.host-list-item {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.host-list-item-open {
-  width: var(--env-var-img-width-2);
-  height: var(--env-var-img-width-2);
-  margin-right: 8px;
-}
-
-.host-list-item-name {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
-}
-
 .host-list-item-precentage {
   font-size: var(--env-var-font-size-medium);
 }
@@ -101,13 +83,6 @@
   padding: calc(var(--env-var-spacing-1) / 2);
 }
 
-.host-status-box-circle {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: calc(var(--env-var-spacing-1) / 2);
-}
-
 .host-actions {
   margin: auto;
   cursor: pointer;

Client/src/Pages/TestUpload/index.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+const TestUpload = () => {
+  const [file, setFile] = useState();
+  function handleChange(e) {
+    setFile(URL.createObjectURL(e.target.files[0]));
+  }
+
+  return (
+    <div>
+      <input type="file" onChange={handleChange} />
+      <img src={file} />
+    </div>
+  );
+};
+
+export default TestUpload;

Server/db/MongoDB.js

@@ -68,8 +68,8 @@ const getUserByEmail = async (req, res) => {
   try {
     // Need the password to be able to compare, removed .select()
     // We can strip the hash before returing the user
-    const user = await UserModel.findOne(
-      { email: req.body.email }.select("-profileImage")
+    const user = await UserModel.findOne({ email: req.body.email }).select(
+      "-profileImage"
     );
     if (user) {
       return user;