Conneted Monitor page to backend. Added data normailization to Checks. Added JSdocs and proptypes

Client/src/App.jsx

@@ -31,7 +31,7 @@ function App() {
         <Route exact path="/register" element={<Register />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/demo" element={<Demo />} />
-        <Route path="/toast" element={<ToastComponent />} />
+        {/* <Route path="/toast" element={<ToastComponent />} /> */}
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />

Client/src/Components/Charts/BarChart/BarChart.jsx

@@ -1,17 +1,57 @@
-import React from "react";
 import "./barChart.css";
 import PropTypes from "prop-types";
 
+const RANGE_MAX = 100;
+const RANGE_MIN = 1;
+
+/**
+ * Normalizes the response times of a set of checks to a specified range.
+ * This function calculates the minimum and maximum response times from the input,
+ * then scales each check's response time linearly between `RANGE_MIN` and `RANGE_MAX`.
+ *
+ * @param {Array<Checks>} checks - An array of check objects. Each check should have a `responseTime` property.
+ * @returns {Array<Checks>} An array of check objects with normalized `responseTime` values.
+ */
+const normalizeData = (checks) => {
+  const min = checks.reduce((accum, cur) => {
+    return Math.min(accum, cur.responseTime);
+  }, Infinity);
+
+  const max = checks.reduce((accum, cur) => {
+    return Math.max(accum, cur.responseTime);
+  }, 0);
+
+  const normalizedChecks = checks.map((check) => {
+    let normailzedResponseTime =
+      RANGE_MIN +
+      ((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min);
+    const normalizedCheck = { ...check, responseTime: normailzedResponseTime };
+    return normalizedCheck;
+  });
+  return normalizedChecks;
+};
+
+/**
+ * BarChart renders a bar chart visualization for a set of checks. Each bar represents a check's response time,
+ * with the color indicating the check's status (green for successful checks, red for failed ones).
+ *
+ * @component
+ * @param {Array<Checks>} checks - An array of check objects to be visualized. Each check object should have an `_id`,
+ * a `status` indicating success (true) or failure (false), and a `responseTime` representing the height of the bar in percentage.
+ */
 const BarChart = ({ checks = [] }) => {
+  const normailzedChecks = normalizeData(checks);
   return (
     <div className="bar-chart">
-      {checks.map((value, index) => (
-        <div
-          key={index}
-          className={`bar ${value.status ? "green" : "red"}`}
-          style={{ height: `${value.responseTime / 3}%` }}
-        />
-      ))}
+      {normailzedChecks.map((check) => {
+        return (
+          <div
+            key={check._id}
+            className={`bar ${check.status ? "green" : "red"}`}
+            style={{ height: `${check.responseTime}%` }}
+          />
+        );
+      })}
     </div>
   );
 };

Client/src/Components/CurrentMonitors/index.jsx

@@ -1,8 +1,15 @@
 import SearchTextField from "../TextFields/Search/SearchTextField";
 import "./index.css";
-import React from "react";
 import HostsTable from "../HostsTable";
 import Pagination from "../Pagination";
+import PropTypes from "prop-types";
+
+/**
+ * CurrentMonitors displays the current status of monitor
+ *
+ * @component
+ * @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
+ */
 
 const CurrentMonitors = ({ monitors }) => {
   return (
@@ -24,4 +31,8 @@ const CurrentMonitors = ({ monitors }) => {
   );
 };
 
+CurrentMonitors.propTypes = {
+  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
 export default CurrentMonitors;

Client/src/Components/HostsTable/index.jsx

@@ -1,4 +1,12 @@
-import React from "react";
+import BarChart from "../Charts/BarChart/BarChart";
+import PropTypes from "prop-types";
+
+/**
+ * HostsTable displays the current status of monitor
+ *
+ * @component
+ * @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
+ */
 
 const HostsTable = ({ monitors }) => {
   return (
@@ -8,20 +16,21 @@ const HostsTable = ({ monitors }) => {
           <tr className="theader-row">
             <td className="theader-row-cell">Host</td>
             <td className="theader-row-cell">Status</td>
-            <td className="theader-row-cell">Team</td>
+            <td className="theader-row-cell">Response</td>
             <td className="theader-row-cell">Actions</td>
           </tr>
         </thead>
         <tbody>
-          {monitors.map((monitor, index) => {
-            console.log(monitor);
+          {monitors.map((monitor) => {
             return (
-              <tr className="tbody-row" key={index}>
+              <tr className="tbody-row" key={monitor._id}>
                 <td className="tbody-row-cell">{monitor.url}</td>
                 <td className="tbody-row-cell">
                   {monitor.isActive ? "Active" : "Down"}
                 </td>
-                <td className="tbody-row-cell">{monitor.team}</td>
+                <td className="tbody-row-cell">
+                  <BarChart checks={monitor.checks} />
+                </td>
                 <td className="tbody-row-cell actions-cell">
                   {monitor.actions}
                 </td>
@@ -34,4 +43,8 @@ const HostsTable = ({ monitors }) => {
   );
 };
 
+HostsTable.propTypes = {
+  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
 export default HostsTable;

Client/src/Layouts/HomeLayout/index.jsx

@@ -3,24 +3,12 @@ import { Outlet } from "react-router";
 import DashboardSidebar from "../../Components/DashboardSidebar";
 import "./index.css";
 
-// Demo, remove me
-import { useSelector } from "react-redux";
-// Emd Demo
-
 const HomeLayout = () => {
-  const authState = useSelector((state) => state.auth);
-  const { user, msg } = authState;
   return (
     <div className="home-layout">
       <NavBar />
       <div className="main-content">
         <DashboardSidebar />
-        {/* Remove me later */}
-        {user && <p>{user.firstname}</p>}
-        {user && <p>{user.lastname}</p>}
-        {user && <p>{user.email}</p>}
-        {msg && <p>Msg: {msg}</p>}
-        {/* I am a demo */}
         <Outlet />
       </div>
     </div>

Client/src/Pages/Monitors/CurrentStats.jsx

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from "react";
-import Host from "../../Components/Host";
-import HostStatus from "../../Components/HostStatus";
-import HostActions from "../../Components/HostActions";
-import BarChart from "../../Components/Charts/BarChart/BarChart";
 import Button from "../../Components/Button";
 import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import CurrentMonitors from "../../Components/CurrentMonitors";
-import MockData from "../../Mock/sample_data.json";
+import PropTypes from "prop-types";
+
+/**
+ * CurrentStats displays the current status of monitor
+ *
+ * @component
+ * @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
+ */
 
 const CurrentStats = ({ monitors }) => {
   return (
@@ -33,4 +35,8 @@ const CurrentStats = ({ monitors }) => {
   );
 };
 
+CurrentStats.propTypes = {
+  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
 export default CurrentStats;

Client/src/Pages/Monitors/index.jsx

@@ -18,7 +18,6 @@ const Monitors = () => {
   return (
     <div className="monitors">
       <CurrentStats monitors={monitorState.monitors} />
-      {/* <CreateNewMonitor /> */}
     </div>
   );
 };