From 9b8c65173620440a2c1bd04519ef5a9591e23aec Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 21 Jun 2024 15:51:53 -0700
Subject: [PATCH] Monitor summary now displays correct data

---
 .../Components/Charts/Servers/ServerStatus.jsx |  4 ++--
 Client/src/Pages/Monitors/CurrentStats.jsx     | 18 +++++++++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Charts/Servers/ServerStatus.jsx b/Client/src/Components/Charts/Servers/ServerStatus.jsx
index f910abf27..632971ab1 100644
--- a/Client/src/Components/Charts/Servers/ServerStatus.jsx
+++ b/Client/src/Components/Charts/Servers/ServerStatus.jsx
@@ -7,7 +7,7 @@ import { useTheme } from "@mui/material";
  * @component
  * @param {Object} props
  * @param {string} props.title - The title text for the server status (required)
- * @param {string} props.value - The value text to be displayed (required)
+ * @param {number} props.value - The value text to be displayed (required)
  * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
  * @returns {JSX.Element} - Renders the server status component
  */
@@ -30,7 +30,7 @@ const ServerStatus = ({ title, value, state }) => {
 
 ServerStatus.propTypes = {
   title: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
   state: PropTypes.string.isRequired,
 };
 
diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx
index b2455936c..ab32b14d6 100644
--- a/Client/src/Pages/Monitors/CurrentStats.jsx
+++ b/Client/src/Pages/Monitors/CurrentStats.jsx
@@ -11,6 +11,18 @@ import PropTypes from "prop-types";
  */
 
 const CurrentStats = ({ monitors }) => {
+  const up = monitors.reduce((acc, cur) => {
+    if (cur.checks) {
+      return cur.checks[cur.checks.length - 1].status === true ? acc + 1 : acc;
+    }
+  }, 0);
+
+  const down = monitors.reduce((acc, cur) => {
+    if (cur.checks) {
+      return cur.checks[cur.checks.length - 1].status === false ? acc + 1 : acc;
+    }
+  }, 0);
+
   return (
     <div>
       <div className="monitors-gaps-medium"></div>
@@ -25,9 +37,9 @@ const CurrentStats = ({ monitors }) => {
       </div>
       <div className="monitors-gaps-medium"></div>
       <div className="monitors-stats">
-        <ServerStatus title="Up" value="4" state="up" />
-        <ServerStatus title="Down" value="0" state="down" />
-        <ServerStatus title="Paused" value="0" state="pause" />
+        <ServerStatus title="Up" value={up} state="up" />
+        <ServerStatus title="Down" value={down} state="down" />
+        <ServerStatus title="Paused" value={0} state="pause" />
       </div>
       <div className="monitors-gaps-medium"></div>
       <CurrentMonitors monitors={monitors} />