From c0dc50ef564015dc5128831eeaf1b71ced444a0e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 4 Jul 2024 14:09:17 -0700 Subject: [PATCH] initial refactor --- .../src/Components/CurrentMonitors/index.jsx | 38 ----------- Client/src/Pages/Monitors/CurrentStats.jsx | 65 ------------------- Client/src/Pages/Monitors/index.css | 2 + Client/src/Pages/Monitors/index.jsx | 61 +++++++++++++++-- .../index.css => Pages/Monitors/monitors.css} | 1 + 5 files changed, 57 insertions(+), 110 deletions(-) delete mode 100644 Client/src/Components/CurrentMonitors/index.jsx delete mode 100644 Client/src/Pages/Monitors/CurrentStats.jsx rename Client/src/{Components/CurrentMonitors/index.css => Pages/Monitors/monitors.css} (98%) diff --git a/Client/src/Components/CurrentMonitors/index.jsx b/Client/src/Components/CurrentMonitors/index.jsx deleted file mode 100644 index 2357c850e..000000000 --- a/Client/src/Components/CurrentMonitors/index.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import SearchTextField from "../TextFields/Search/SearchTextField"; -import "./index.css"; -import HostsTable from "../HostsTable"; -import Pagination from "../Pagination"; -import PropTypes from "prop-types"; - -/** - * CurrentMonitors displays the current status of monitor - * - * @component - * @param {Array} monitors - An array of monitor objects to be displayed. - */ - -const CurrentMonitors = ({ monitors }) => { - return ( -
-
-
-
Current monitors
-
{monitors.length}
-
-
- -
-
-
- -
- -
- ); -}; - -CurrentMonitors.propTypes = { - monitors: PropTypes.arrayOf(PropTypes.object).isRequired, -}; - -export default CurrentMonitors; diff --git a/Client/src/Pages/Monitors/CurrentStats.jsx b/Client/src/Pages/Monitors/CurrentStats.jsx deleted file mode 100644 index ef15ae6cc..000000000 --- a/Client/src/Pages/Monitors/CurrentStats.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import Button from "../../Components/Button"; -import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; -import CurrentMonitors from "../../Components/CurrentMonitors"; -import PropTypes from "prop-types"; -import { useSelector } from "react-redux"; -import { useNavigate } from "react-router-dom"; - -/** - * CurrentStats displays the current status of monitor - * - * @component - * @param {Array} monitors - An array of monitor objects to be displayed. - */ - -const CurrentStats = ({ monitors }) => { - const navigate = useNavigate(); - const authState = useSelector((state) => state.auth); - const up = monitors.reduce((acc, cur) => { - if (cur.checks.length > 0) { - return cur.checks[cur.checks.length - 1].status === true ? acc + 1 : acc; - } - return 0; - }, 0); - - const down = monitors.reduce((acc, cur) => { - if (cur.checks.length > 0) { - return cur.checks[cur.checks.length - 1].status === false ? acc + 1 : acc; - } - return 0; - }, 0); - - return ( -
-
-
-
-
- Hello, {authState.user.firstname} -
-
-
-
- - - -
-
- -
- ); -}; - -CurrentStats.propTypes = { - monitors: PropTypes.arrayOf(PropTypes.object).isRequired, -}; - -export default CurrentStats; diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index 6efd05617..987bbd7cd 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -9,6 +9,7 @@ } .monitors-bar { + margin-top: calc(2 * var(--env-var-spacing-2)); display: flex; justify-content: space-between; align-items: center; @@ -20,6 +21,7 @@ } .monitors-stats { + margin-top: var(--env-var-spacing-2); display: flex; gap: 24px; } diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 5f7b4b9af..049d758ac 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,22 +1,69 @@ -import CurrentStats from "./CurrentStats"; import "./index.css"; +import "./monitors.css"; import { useEffect } from "react"; -import { useSelector } from "react-redux"; -import { useDispatch } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice"; - +import { useNavigate } from "react-router-dom"; +import Button from "../../Components/Button"; +import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; +import SearchTextField from "../../Components/TextFields/Search/SearchTextField"; +import HostsTable from "../../Components/HostsTable"; +import Pagination from "../../Components/Pagination"; const Monitors = () => { + const navigate = useNavigate(); const monitorState = useSelector((state) => state.monitors); - const authstate = useSelector((state) => state.auth); + const authState = useSelector((state) => state.auth); const dispatch = useDispatch(); useEffect(() => { - dispatch(getMonitorsByUserId(authstate.authToken)); + dispatch(getMonitorsByUserId(authState.authToken)); }, []); + const up = monitorState.monitors.reduce((acc, cur) => { + return cur.status === true ? acc + 1 : acc; + }, 0); + + const down = monitorState.monitors.length - up; + return (
- +
+
+ Hello, {authState.user.firstname} +
+
+ +
+ + + +
+ +
+
+
+
Current monitors
+
+ {monitorState.monitors.length} +
+
+
+ +
+
+
+ +
+ +
); }; diff --git a/Client/src/Components/CurrentMonitors/index.css b/Client/src/Pages/Monitors/monitors.css similarity index 98% rename from Client/src/Components/CurrentMonitors/index.css rename to Client/src/Pages/Monitors/monitors.css index 8580bfcd0..c2ed8532f 100644 --- a/Client/src/Components/CurrentMonitors/index.css +++ b/Client/src/Pages/Monitors/monitors.css @@ -1,4 +1,5 @@ .current-monitors { + margin-top: var(--env-var-spacing-2); border: 1px solid #eaecf0; padding: 40px; border-radius: 4px;